Appearance
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:
- Import the
defineCustomElementSFC
function from thevue-web-component-wrapper
package. - 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.
- The options object can include the
- Use the
customElements.define
method to define your custom element, providing a name for the element and the result of thedefineCustomElementSFC
function.
Example
javascript
// main.js
import { defineCustomElementSFC } from 'vue-web-component-wrapper';
const MyComponentElement = defineCustomElementSFC(MyComponent, {shadowRoot: false})
customElements.define('my-component', MyComponentElement)