Building-Components shadow Dom

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
165

<!-- 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>
打赏测试
显示 Gitment 评论