29 lines
756 B
Plaintext
29 lines
756 B
Plaintext
|
# 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 |
|