consul/ui/packages/consul-ui/app/modifiers/attach-shadow.mdx

29 lines
756 B
Markdown

# attach-shadow
`{{attach-shadow (set this 'shadow')}}` attaches a `ShadowRoot` to the modified DOM element
and pass a reference to that `ShadowRoot` to the setter function.
Please note: This should be used as a utility modifier for when having access
to the shadow DOM is handy, not really for building full blown shadow DOM
based Web Components.
```hbs preview-template
<div
{{attach-shadow (set this 'shadow')}}
>
{{#if this.shadow}}
{{#in-element this.shadow}}
<slot name="name"></slot>
{{/in-element}}
{{/if}}
<p slot="name">Hello from the shadows!</p>
</div>
```
## Positional Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `setter` | `function` | | Usually `set` or `mut` or similar |