---
description: web component examples
---

# web component examples

{% tabs %}
{% tab title="👉 相關" %}
* [Styling in Shadow DOM](shadow-dom/styles)
{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}

| fav     | component                                                                                           | extends | notes                                                                                                                                                                                                                                                                                                                                                                                                         |
| ------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|         | [life cycle callbacks test](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)    |         | 💾 [github](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks)                                                                                                                                                                                                                                                                                                                  |
| :star:  | [\<popup-info>](examples/popup-info)                                                                |         | 使用 [external styles](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#internal_versus_external_styles)                                                                                                                                                                                                                                                                            |
| :star:  | [\<expanding-list>](examples/expanding-list)                                                        | \<ul>   | <p><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#customized_built-in_elements">MDN</a></p><p>💾 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#customized_built-in_elements">replit</a>, <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/index.html">github</a></p> |
|         | [\<fancy-tabs>](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=en#demo) |         | <p>Google</p><p>💾 <a href="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b">github</a></p>                                                                                                                                                                                                                                                                                                   |
|         | [\<time-formatted>](examples/less-than-time-formatted-greater-than)                                 |         | <p><a href="https://javascript.info/custom-elements#example-time-formatted">JS.info</a></p><p>💾 <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/index.html">replit</a></p>                                                                                                                                                                                  |
| :star:  | [\<live-timer>](examples/less-than-live-timer-greater-than)                                         |         | <p>👉 <a href="https://javascript.info/custom-elements#live-timer-element">js.info</a></p><p>使用 <a href="examples/less-than-time-formatted-greater-than">&#x3C;time-formatted></a></p><p>💾 <a href="https://replit.com/@pegasusroe/web-component-live-timer#js/LiveTimer.js">replit</a></p>                                                                                                                  |
|         | [\<error-message>](examples/less-than-error-message-greater-than)                                   |         | 使用 [\<template>](template)                                                                                                                                                                                                                                                                                                                                                                                    |

* [\<centered-dialog>](examples/custom-dialog) - 使用 [:host](../shadow-dom/styles#cheat-sheet)&#x20;
* [\<element-details>](examples/element-details) - 使用 :host, ::slotted(), \<details>
