shadow root vs. host

The attachShadow() method receives a mode that can be 'open' or 'closed'. 👉parameters for element.attachShadow().

  • 'open': can access the Shadow DOM (elem.shadowRoot) from the main context.

  • 'closed': you can’t. (elem.shadowRoot == null)

// attach a shadow DOM to element
let root = host.attachShadow({mode: 'open'});
// ⭐️ root.host === host
// ⭐️ host.shadowRoot === root
  • The shadow host must be either a custom element, or one of: “article”, “aside”, “blockquote”, “body”, “div”, “footer”, “h1h6”, “header”, “main” “nav”, “p”, “section”, or “span”.

  • The spec defines a list of elements that can't host a shadow tree.

Last updated