Use CSS Variables

Web Components ⟩ Shadow DOM ⟩ Styling ⟩

📗 參考

• Google ⟩ Web Component ⟩ Creating style hooks using CSS custom properties

👉 相關

• Styling Slotted Content

• CSS Variables

• ⭐️ use CSS variables: CSS variables exist on all levels, both in light and shadow. 📗 JS.info ⟩ CSS hooks with custom properties

html

<style>
  fancy-tabs {
    margin-bottom: 32px;
    --fancy-tabs-bg: black;  <!-- ⭐️ css var -->
  }
</style>
<fancy-tabs background>...</fancy-tabs>

shadow DOM

/* inside shadow DOM */
:host([background]) {
  background: var(--fancy-tabs-bg, #9E9E9E);    /* ⭐️ css hook */
  border-radius: 10px;
  padding: 10px;
}