Skip to content

Instantly share code, notes, and snippets.



Last active Apr 2, 2019
What would you like to do?
Web Components in Action v6: 7.5.1 Slots without a Name (p.156)
file: index.html
Web Components in Action MEAP v6!/book/web-components-in-action/chapter-7/v-6/comment-487676
prevent undefined custom element FOUC (flash of unstyled content)
- i.e. create shadowRoot in constructor rather than connectedCallback
- this.shadowRoot is automatically created - no need for separate this.root
> The Element.shadowRoot read-only property represents the shadow root hosted by the element.
> Use Element.attachShadow() to add a shadow root to an existing element.
<title>Unnamed Slots Demo</title>
slots-demo:not(:defined) {
display: none; /* #1 */
<slots-demo>Any content here goes in the slot</slots-demo>
<button>A Button</button>
Some Text
<br />
<slot>placeholder text</slot>
(function() {
const template = document.querySelector('template')
class SlotsDemo extends HTMLElement {
constructor() {
const clone = document.importNode(template.content, true)
// #2
this.attachShadow({mode: 'open'});
if (!customElements.get('slots-demo')) {
customElements.define('slots-demo', SlotsDemo)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.