1
/** 0️⃣ 自定义元素 - 计数按钮 */
2
class CountButton extends HTMLElement {
3
  private _count = 0
4

5
  /** 1️⃣ 元素被添加到页面中时执行 */
6
  constructor() {
7
    super()
8

9
    /** 2️⃣ shadow DOM */
10
    const shadow = this.attachShadow({ mode: 'open' })
11

12
    /** 计数按钮 */
13
    const button = document.createElement('button')
14
    button.textContent = `count is ${this._count}` // 绑定元素内容
15
    button.addEventListener('click', () => button.textContent = `count is ${++this._count}`) // 绑定点击事件
16

17
    /** 3️⃣ 样式元素 */
18
    const style = document.createElement('style')
19
    style.textContent = `
20
      button {
21
        border-radius: 8px;
22
        border: 1px solid transparent;
23
        padding: 0.6em 1.2em;
24
        font-size: 1em;
25
        font-weight: 500;
26
        font-family: inherit;
27
        background-color: #1a1a1a;
28
        cursor: pointer;
29
        transition: border-color 0.25s;
30
      }
31
      button:hover {
32
        border-color: #646cff;
33
      }
34
      button:focus,
35
      button:focus-visible {
36
        outline: 4px auto -webkit-focus-ring-color;
37
      }
38
    `
39

40
    shadow.appendChild(style) // 插入样式
41
    shadow.appendChild(button) // 插入元素
42
  }
43
}
44

45
// 4️⃣ 注册自定义元素
46
customElements.define('count-button', CountButton)

1
<div class="card">
2
  <button id="counter" type="button"></button>
3
</div>
4
 <div>
5
   <count-button></count-button>
6
 </div>

1
class CountButton extends HTMLElement {
2
  /** 需要监听的属性 */
3
  static observedAttributes = ['count']
4
  /** 数量 */
5
  private _count = 233
6

7
  /** 按钮元素 */
8
  private _button = document.createElement('button')
9
  /**
10
   * 更新按钮元素的内容
11
   * @param count 数量
12
   */
13
  private _updateButtonContent(count = this._count) {
14
    this._button.textContent = `count is ${count}`
15
  }
16

17
  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
18
    console.log(`${name} changed from ${oldValue} to ${newValue}`) // 属性变化时触发
19
    if (name === 'count') {
20
      this._count = Number(newValue)
21
      this._updateButtonContent()
22
    }
23
  }
24

25
  constructor() {
26
    super()
27

28
    /** shadow DOM */
29
    const shadow = this.attachShadow({ mode: 'open' })
30

31
    /** 计数按钮 */
32
    this._updateButtonContent()
33
    this._button.addEventListener('click', () => this._updateButtonContent(++this._count)) // 绑定点击事件
34

35
    /** 样式元素 */
36
    const style = document.createElement('style')
37
    style.textContent = `
38
      button {
39
        border-radius: 8px;
40
        border: 1px solid transparent;
41
        padding: 0.6em 1.2em;
42
        font-size: 1em;
43
        font-weight: 500;
44
        font-family: inherit;
45
        background-color: #1a1a1a;
46
        cursor: pointer;
47
        transition: border-color 0.25s;
48
      }
49
      button:hover {
50
        border-color: #646cff;
51
      }
52
      button:focus,
53
      button:focus-visible {
54
        outline: 4px auto -webkit-focus-ring-color;
55
      }
56
      @media (prefers-color-scheme: light) {
57
        :root {
58
          color: #213547;
59
          background-color: #ffffff;
60
        }
61
        button {
62
          background-color: #f9f9f9;
63
        }
64
      }
65
    `
66

67
    shadow.appendChild(style) // 插入样式
68
    shadow.appendChild(this._button) // 插入元素
69
  }
70

71
  /** 元素被添加到页面中时执行 */
72
  connectedCallback() {
73
    // 如果元素未添加 count 属性, 那么就添加并设置为默认值
74
    if (!this.hasAttribute('count')) this.setAttribute('count', this._count.toString())
75
  }
76
}
77

78
// 注册自定义元素
79
customElements.define('count-button', CountButton)

1
<style>
2
  h2 {
3
    text-decoration-line: underline;
4
  }
5
</style>
6
<template id="my-title">
7
  <style>
8
    header {
9
      color: red;
10
    }
11
  </style>
12
  <header>
13
    <slot name="title">NEED TITLE</slot>
14
  </header>
15
</template>
16
<script src="./web-components-shadow-dom-slot.js"></script>
17
<my-title>
18
</my-title>
19
<my-title>
20
  <h2 slot="title">title</h2>
21
</my-title>

1
class MyTitle extends HTMLElement {
2
  constructor() {
3
    super()
4
    /** shadow DOM */
5
    const shadow = this.attachShadow({ mode: 'open' })
6

7
    const myTemplate = document.getElementById('my-title')
8

9
    shadow.appendChild(myTemplate.content.cloneNode(true))
10
  }
11
}
12
customElements.define('my-title', MyTitle)