Building-Components shadow Dom

Posted on Edited on In , ,

https://developers.google.com/web/fundamentals/web-components/shadowdom#slots

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!-- custom dom -->
<custom-tabs>
    <!-- 定义slot -->
    <button slot="tab">button</button>
    <button slot="tab">button</button>
    <button slot="tab">button</button>
    <!-- 默认slot -->
    <section>section1</section>
    <section>section2</section>
    <section>section3</section>
  </custom-tabs>

  <script>
  let selected_ = null
  class customTab extends HTMLElement {
    constructor() {
      super()

      let shadowRoot = this.attachShadow({mode: 'open'})
      // 样式 内容
      shadowRoot.innerHTML = `
        <style>
          :host {
            border: 1px solid #ececec;
            display: inline-block;
          }

          #tabs ::slotted(*) {
            border: none;
            outline: none;
            padding: 20px 40px;
            background: #f1f1f1;
          }

          #tabs ::slotted([aria-selected="true"]) {
            background: #fff;
          }

          #panels {
            padding: 20px;
            font-size: 18px;
          }

          #panels ::slotted([aria-hidden="true"]) {
            display: none;
          }

        </style>

        <div id="tabs">
          <slot id="tabSlot" name="tab"></slot>
        </div>
        <div id="panels">
          <slot id="panelsSlot"></slot>
        </div>
      `
    }

    // get set
    get selected() {
      return selected_
    }

    set selected(idx) {
      selected_ = idx
      this._selected(idx)
    }

    connectedCallback() {

      // set role
      this.setAttribute('role', 'tab-list')

      // get Element
      let tabsSlot = this.shadowRoot.querySelector('#tabSlot')
      let panelsSlot = this.shadowRoot.querySelector('#panelsSlot')

      // filter Element
      this.tabs = tabsSlot.assignedNodes({flatten: true})
      this.panels = panelsSlot.assignedNodes({flatten: true}).filter(el => el.nodeType === Node.ELEMENT_NODE)


      // set role
      for (const [i, panel] of this.panels.entries()) {
        panel.setAttribute('role', 'tab-panel')
      }

      // set click keydown event
      this._boundOnTitleClick = this._onTitleClick.bind(this)
      this._boundOnKeydown = this._onKeydown.bind(this)

      tabsSlot.addEventListener('click', this._boundOnTitleClick)
      tabsSlot.addEventListener('keydown', this._boundOnKeydown)

      // set default selected, by tab html selected attribute
      this.selected = this._findFirstSelectedTab() || 0
    }

    // tab click event
    _onTitleClick(e) {
      if (e.target.slot === 'tab') {
        // now click Element index
        this.selected = this.tabs.indexOf(e.target)
      }
    }

    // tab keydown event
    _onKeydown(e) {
      switch(e.code) {
        // up left
        case 'ArrowUp':
        case 'ArrowLeft':
          e.preventDefault()
          // --, if it's 0 idx = length - 1 else idx
        var idx = this.selected - 1
        idx = idx < 0 ? this.tabs.length - 1 : idx
        // click event
        this.tabs[idx].click()
          break;
          // down right
        case 'ArrowDown':
        case 'ArrowRight':
          e.preventDefault()
          // ++ by & tab click event
        var idx = this.selected + 1
        this.tabs[idx % this.tabs.length].click()
          break;
        default:
          break;
      }
    }

    // find tab html attribute selected set now Tab
    _findFirstSelectedTab() {
      let selectedIdx
      // for
      for (const [i, tab] of this.tabs.entries()) {
        // set role
        tab.setAttribute('role', 'tab')
        // if tab has selected, nowTab is i
        if (tab.hasAttribute('selected')) {
          selectedIdx = i
        }
      }
      return selectedIdx
    }

    // set tab toggle function
    _selected(idx = null) {
      // for
      for(let i = 0, tab; tab = this.tabs[i]; ++i) {
        // if idx === i equal true
        let selected = idx === i
        // set attribute
        tab.setAttribute('aria-selected', selected)
        this.panels[i].setAttribute('aria-hidden', !selected)
      }
    }
  }


  if (customElements) customElements.define('custom-tabs', customTab)
  else console.log('不支持 custom')
  </script>