FEATURE | Add docs for support for SFC custom elements and shadow DOM option

Author: EranGrin

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [1.6.0] - 13.06.2024
+### Added
+- Added support for SFC custom elements
+
 ## [1.5.1] - 12.06.2024
 ### Fixed
 - Fixed issue with HMR in Vite.js

README.md

@@ -276,7 +276,24 @@ import style from './style.css?raw'
 If you want to create a web component without shadow DOM, you can set the `disableShadowDOM` option to `true` in the `createWebComponent` function. This will create a web component without shadow DOM encapsulation.
 This feature uses a patch to the Vue source code, which could lead to some issues with future versions of Vue. If you encounter any issues, please report them in the issues section of this repository.
 ### Demo without Shadow DOM
-[Demo](https://stackblitz.com/~/github.com/EranGrin/web-component-no-shadow-dom-demo)
+[Demo Link](https://stackblitz.com/~/github.com/EranGrin/web-component-no-shadow-dom-demo)
+
+
+## SFC as Custom Element
+enhance the core functionality of SFC as Custom Element [defineCustomElement](https://vuejs.org/guide/extras/web-components#sfc-as-custom-element) with 2 new features:
+1. **Nested Components**: You can use nested components with styles and for example share base components between multiple custom elements.
+2. **Shadow DOM option**: You can disable shadow DOM for the SFC custom element.
+
+### Usage
+```javascript
+// main.js
+import { defineCustomElementSFC } from 'vue-web-component-wrapper';
+const MyComponentElement = defineCustomElementSFC(MyComponent, {shadowRoot: false})
+customElements.define('my-component', MyComponentElement)
+```
+
+### Demo
+[Demo Link](https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=sfc-demo)
 
 
 ## Tips

demo-SFC-vite/src/main.ts

@@ -1,5 +1,4 @@
 import { defineCustomElementSFC } from '../../package/index.js'
-// import { defineCustomElement } from 'vue'
 import MyComponent from './MyComponent.ce.vue'
 
 const MyComponentElement = defineCustomElementSFC(MyComponent, {shadowRoot: false})

docs/.vitepress/config.js

@@ -21,6 +21,7 @@ export default {
           { text: 'event-emitting', link: '/event-emitting' },
           { text: 'disable-shadow-dom', link: '/disable-shadow-dom' },
           { text: 'host-implementation', link: '/host-implementation' },
+          { text: 'SFC as Custom Element', link: '/sfc-as-custom-element' },
         ],
       },
       {

docs/sfc-as-custom-element.md

@@ -0,0 +1,34 @@
+
+
+## SFC as Custom Element
+
+This section explains how to enhance the core functionality of SFC (Single File Component) as a Custom Element using the `defineCustomElementSFC` method. It introduces two new features: **Nested Components** and **Shadow DOM option**.
+
+### Nested Components
+
+With the SFC as Custom Element approach, you can use nested components with styles and share base components between multiple custom elements. This allows for better code organization and reusability.
+
+### Shadow DOM option
+
+The SFC custom element supports the option to enable or disable the Shadow DOM. The Shadow DOM provides encapsulation for the component's styles and DOM structure, preventing them from affecting the rest of the page. By default, the Shadow DOM is enabled, but you can disable it if needed.
+
+### Usage
+
+To use SFC as a Custom Element, follow these steps:
+
+1. Import the `defineCustomElementSFC` function from the `vue-web-component-wrapper` package.
+2. Call the `defineCustomElementSFC` function, passing in your SFC component and an options object.
+    - The options object can include the `shadowRoot` property, which determines whether the Shadow DOM should be enabled or disabled for the custom element.
+3. Use the `customElements.define` method to define your custom element, providing a name for the element and the result of the `defineCustomElementSFC` function.
+
+### Example
+
+```javascript
+// main.js
+import { defineCustomElementSFC } from 'vue-web-component-wrapper';
+const MyComponentElement = defineCustomElementSFC(MyComponent, {shadowRoot: false})
+customElements.define('my-component', MyComponentElement)
+```
+
+### Demo
+[Demo Link](https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=sfc-demo)

docs/usage.md

@@ -57,6 +57,7 @@ createWebComponent({
   createApp,
   getCurrentInstance,
   disableStyleRemoval: false,
+  disableShadowDOM: false,
 });
 ```
 Each option in the `createWebComponent` function has a specific purpose:
@@ -68,4 +69,5 @@ Each option in the `createWebComponent` function has a specific purpose:
 - `h`: The `h` function from Vue.
 - `createApp`: The `createApp` function from Vue.
 - `getCurrentInstance`: The `getCurrentInstance` function from Vue.
-- `disableStyleRemoval`: A boolean value that determines whether or not to remove styles on unmount. This is useful for CSS transitions.
+- `disableStyleRemoval`: A boolean value that determines whether or not to remove styles on unmount. This is useful for CSS transitions.
+- `disableShadowDOM`: A boolean value that determines whether or not to use Shadow DOM for the web component.

package.json

@@ -1,11 +1,12 @@
 {
     "name": "vue-web-component-wrapper",
-    "version": "1.5.1",
+    "version": "1.6.0",
     "description": "A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.",
     "repository": {
         "type": "git",
         "url": "https://github.com/EranGrin/vue3-web-component-wrapper/tree/main/plugin"
     },
+    "homepage": "https://erangrin.github.io/vue-web-component-wrapper/",
     "main": "package/dist/vue-web-component-wrapper.umd.js",
     "module": "package/dist/vue-web-component-wrapper.es.js",
     "types": "package/types.d.ts",