vue-web-component-wrapper/docs/slots.md

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.

## Using Slots && Named Slots in `vue-web-component-wrapper`

The `vue-web-component-wrapper` enhances Vue components to be used as standard web components, supporting named slots. Use the `namedSlots` attribute in your Vue component to specify which slots are named.

### Defining Named Slots in Vue Component

In your Vue component, define the `namedSlots` in the component's options to specify which slots are named.

**App.vue (Vue Component):**

```vue
<template>
  <div>
    <!-- Usage of default slot -->
    <slot></slot>

    <!-- Usage of named slot -->
    <slot name="customName"></slot>
  </div>
</template>

<script>
export default {
  name: 'App',
  namedSlots: ['customName'],
  // ... other component options
}
</script>
```
In this example, App.vue declares a named slot customName by specifying it in the namedSlots array.

### Using Named Slots in Web Component
## Usage in HTML:

```html
    <my-web-component>
        <!-- Content for the default slot -->
        <h1>I am a default slot</h1>
        
        <!-- Content for the named slot 'customName' -->
        <div slot="customName">I am a custom slot</div>
    </my-web-component>
```
Here, the `<h1>` tag is passed into the default slot of `my-web-component`, and the `<div>` with `slot="customName"` is passed into the named slot `customName`.


### Web Component without Shadow DOM
if useing `disableShadowDOM` option in `createWebComponent` function, the named slots will be rendered in the light DOM without the need of defining the named slots in the Vue component.
`namedSlots: ['customName']`: Not needed if `disableShadowDOM` is `true` 

### Tips
- The slot names defined in your Vue component (`header`, `footer`, etc.) should match the `slot` attributes used in the HTML where the web component is utilized.
- The `slot` attribute in the HTML should match the `name` attribute in the Vue component.
- The `namedSlots` attribute in the Vue component should be an array of strings, where each string is the name of a named slot.