🌎
web.dev
search
⌘Ctrlk
🌎
web.dev
  • 🌏web.dev
  • ⚙️tools
  • 🔰HTML
  • 🔰CSS
  • 🍒JS
  • 🔰web component
    • 🔸custom element
    • 🔸shadow DOM
    • 🔸<template>
    • 🔸light DOM
    • 🔰implementing components
    • 🔰using components
    • Built-in Components
    • ✨web component examples
      • ✨<search-box>
      • <my-log> ❤️
      • <element-details>
      • <custom-dialog>
      • <user-card>
      • <expanding-list>
      • <dom-hierarchy> ⭐️
      • <time-formatted>
      • <live-timer>
      • <error-message>
      • <popup-info>
      • <custom-menu>
  • 🌐browser
  • 🔰React
  • Server
  • 🔖附錄
    • 👔custom
    • 🧩three.js
    • 🅰️Google Apps Script
    • 📖JSDoc
    • 📦data structure
    • 🔰algorithm
    • 🔰paradigm
    • 🔰TypeScript
    • 💎resource
gitbookPowered by GitBook
block-quoteOn this pagechevron-down
  1. 🔰web component

✨web component examples

web component examples

  • Styling in Shadow DOM

fav

component

extends

notes

life cycle callbacks testarrow-up-right

💾 githubarrow-up-right

⭐

<popup-info>

使用 external stylesarrow-up-right

⭐

<expanding-list>

<ul>

MDNarrow-up-right

💾 replitarrow-up-right, githubarrow-up-right

<fancy-tabs>arrow-up-right

Google

💾 githubarrow-up-right

<time-formatted>

JS.infoarrow-up-right

💾 replitarrow-up-right

⭐

<live-timer>

👉 js.infoarrow-up-right

使用 <time-formatted>

💾 replitarrow-up-right

<error-message>

使用 <template>

  • <centered-dialog> - 使用 :host

  • <element-details> - 使用 :host, ::slotted(), <details>

Previous<details>chevron-leftNext<search-box>chevron-right

Last updated 3 years ago