shadow DOM styles

Web Components ⟩ Shadow DOM ⟩

📘 手冊

• MDN ⟩

  • Using templates and slots

  • CSS ⟩

    • contain

    • ::slotted()

    • :host-context()

• Google ⟩

  • Resetting inheritable styles in shadow DOM

  • Web Component ⟩ Component-defined styles

⭐️ 重點

📗 參考

👥 相關

:host, :host(), :host-context(), ::slotted()

:host, :host(), :host-context() only works in the context of a shadow root, you can't use it outside of shadow DOM.

:host & :host( )

/* ⭐️ select host element (from inside shadow DOM) */
:host {

  /* ⭐️ by default, custom elements are `display: inline` */
  display: block;
  
  /* CSS containment */ 
  contain: content; 
}

:host {
  opacity: 0.4;
  will-change: opacity;
  transition: opacity 300ms ease-in-out;
}

/*
  ⭐️ :host(<selector>) ⭐️
     -----------------
     target the host if it matches a <selector>. 
*/
:host(:hover) {
  opacity: 1;
}

:host([disabled]) { /* style when host has disabled attribute. */
  background: grey;
  pointer-events: none;
  opacity: 0.4;
}

:host(.blue) {
  color: blue; /* color host when it has class="blue" */
}

:host(.pink) > #tabs {
  color: pink; /* color internal #tabs node when host has class="pink". */
}

:host-context( )

::slotted( )

📗 參考

⭐️ 注意：

• 如果同時在 shadow DOM 與 light DOM 中分別用 :host 與 custom-element selector 對 <custom-element> 做 CSS 格式設定，則外部的格式具有優先權。

• 我們可以利用這種特性，使用 :host 對 <custom-element> 設定預設格式，然後在外部的 CSS 中再使用 custom-element 設定自訂格式。

Topics

• Styling Slotted Content

Examples

• :host - <custom-dialog>, <user-card>, <element-details>

• :host() - <custom-dialog>, <element-details>

• ::slotted() - <user-card>, <element-details> 👉 slotted content