shadow root vs. host

📘 手冊

• Element.shadowRoot

• EventTarget ⟩ Node ⟩ DocumentFragment ⟩ ShadowRoot ⭐

• Google ⟩ Creating shadow DOM

🛠 工具

• web platform test: ShadowRoot

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”, “h1…h6”, “header”, “main” “nav”, “p”, “section”, or “span”.

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