Use CSS Variables

Web Components ⟩ Shadow DOM ⟩ Styling ⟩

📗 參考

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

👉 相關

• ⭐️ 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