mirror of
https://github.com/status-im/consul.git
synced 2025-01-10 05:45:46 +00:00
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.
30 lines
1.1 KiB
Plaintext
30 lines
1.1 KiB
Plaintext
# 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 |
|