# 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 |