shadow DOM styles

Web Components โŸฉ Shadow DOM โŸฉ

: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.

/* โญ๏ธ 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". */
}

โญ๏ธ ๆณจๆ„๏ผš

  • ๅฆ‚ๆžœๅŒๆ™‚ๅœจ shadow DOM ่ˆ‡ light DOM ไธญๅˆ†ๅˆฅ็”จ :host ่ˆ‡ custom-element selector ๅฐ <custom-element> ๅš CSS ๆ ผๅผ่จญๅฎš๏ผŒๅ‰‡ๅค–้ƒจ็š„ๆ ผๅผๅ…ทๆœ‰ๅ„ชๅ…ˆๆฌŠใ€‚

  • ๆˆ‘ๅ€‘ๅฏไปฅๅˆฉ็”จ้€™็จฎ็‰นๆ€ง๏ผŒไฝฟ็”จ :host ๅฐ <custom-element> ่จญๅฎš้ ่จญๆ ผๅผ๏ผŒ็„ถๅพŒๅœจๅค–้ƒจ็š„ CSS ไธญๅ†ไฝฟ็”จ custom-element ่จญๅฎš่‡ช่จ‚ๆ ผๅผใ€‚

Topics

Examples

Previousshadow root vs. hostNextUse CSS Variables

Last updated

Was this helpful?