🔰using components

browser ⟩ web components ⟩ using components

⭐️ 重點

do not query web components too early.

some web components are written to:

• expect children.

• not expect children (and won't display them)

• optionally accept specially labelled children that will appear in named "slots".

💈範例

<!-- load web component module -->
<script type="module" src="components/search-box.js">

<!-- use its tag in HTML -->
<search-box placeholder="Search..."></search-box>

<!-- using named slots -->
<search-box>
    <img src="images/search-icon.png" slot="left"/>
    <img src="images/cancel-icon.png" slot="right"/>
</search-box>

📗 參考

• 📗 JavaScript: The Definitive Guide (15.6 Web Components)