# using components

[browser](../browser) ⟩ [web components]() ⟩ using components

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
do not [query web components](../browser/dom/querying-elements) [<mark style="color:red;">**too early**</mark>](../browser/event/client-side-javascript-timeline).
{% endhint %}

{% hint style="info" %}
some web components are written to:

* expect <mark style="color:yellow;">**children**</mark>.
* <mark style="color:red;">**not**</mark> expect <mark style="color:yellow;">**children**</mark> (and <mark style="color:red;">**won't display**</mark> them)
* **optionally** accept <mark style="color:yellow;">**specially labelled children**</mark> that will appear in **named** "[slots](shadow-dom/slots)".
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}
```html
<!-- 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>
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] :green\_book: JavaScript: The Definitive Guide (15.6 Web Components)
{% endtab %}
{% endtabs %}
