Render custom elements in light and shadow dom
Now with slots!
(blank custom element with placeholder info in slots)
(complex example with
slot
A placeholder inside a web component that users can fill with their
own markup, with the effect of composing different DOM trees
together.
- name
- The name of the slot.
default slot)
template (light)
A mechanism for holding client- side content that is not to be
rendered when a page is loaded but may subsequently be instantiated
during runtime using JavaScript. Note: the style element is only
injected once since it's global.
- light
- (no value) renders to light dom
(default slot in shadow)
template (shadow)
A mechanism for holding client- side content that is not to be
rendered when a page is loaded but may subsequently be instantiated
during runtime using JavaScript. Note: the style element is cloned
with the template.
(put a dynamic instance here)
See MDN for the original version of this demo.