# using components

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [web components](https://lochiwei.gitbook.io/web/component) ⟩ using components

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
do not [query web components](https://lochiwei.gitbook.io/web/browser/dom/querying-elements) [<mark style="color:red;">**too early**</mark>](https://lochiwei.gitbook.io/web/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](https://lochiwei.gitbook.io/web/component/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 %}