mirror of https://github.com/hashicorp/consul
25f3ebd66a
Builds on attach-shadow, adopt-styles and ShadowTemplate, this commit adds ShadowHost and finally CustomElement. CustomElement is a renderless component to help with the creation of native HTML Custom Elements along with runtime type checking and self-documentation for attributes, slots, cssprops and cssparts. As you will probably see there is a little more work to come here. But in the same breath, everything would be fine to go in as is. |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
README.mdx
# ShadowHost
`ShadowHost` is a small renderless mainly utility component for easily attaching
ShadowDOM to any applicable DOM node. It mainly exists to provide a context for
passing around a reference to the element to be used for the shadow template,
but named appropriately for recognition.
If you are looking to write a custom element, please use the `CustomElement`
component. If you are simply attaching ShadowDOM to a native HTML element then
this is the component for you.
```hbs preview-template
<ShadowHost as |shadow|>
<div
{{did-insert shadow.host}}
>
<shadow.Template>
<p>hi</p>
</shadow.Template>
</div>
</ShadowHost>
```
## Exports
| Attribute | Type | Description |
| :-------- | :---------------------- | :------------------------------------------------------------------------------- |
| host | function | A did-insert-able callback for tagging an element to be used for the shadow root |
| Template | ShadowTemplateComponent | ShadowTemplate component pre-configured with the shadow host |