我正在嘗試獲取所選選項的值，因此當(dāng)有人使用我的 Web 組件時，他們可以訪問它。我認(rèn)為問題與影子根有關(guān)__createOptions() { const SELECT = this.shadowRoot.querySelector('select'); SELECT.addEventListener('change', event => { this.value= event.target.value; }); this.shadowRoot.addEventListener('slotchange', () => { const OPTION = this.querySelector('option'); if (OPTION) { SELECT.append(OPTION); } });}render() { return html` <div class="selectWrapper"> <select id="typeDropdown"></select> </div> <slot></slot>`;} <wc-select value=""> <option value="1">Option 1</option> <option value"2">Option 2</option> <option value="3">Option 3</option> </wc-select>
1 回答
楊__羊羊
將 lightDOM 追加
TA貢獻(xiàn)1943條經(jīng)驗 獲得超7個贊
<SLOTs>無法像“普通”DOM 元素一樣定位
（和許多人一樣）您陷入了認(rèn)為分槽內(nèi)容
已移動到 ShadowDOM 的陷阱<slots>
它不是。
開槽內(nèi)容僅在 ShadowDOM 中反射，它仍然不可見！在 lightDOM 中
您無法使用或...訪問反射內(nèi)容?，因為它不在那里（在 ShadowDOM 中）.. 它仍然在 lightDOM 中。.querySelector.children[]
出于同樣的原因，您可以在 lightDOM 中設(shè)置開槽內(nèi)容的樣式：
使用 CSS 選擇器，例如 :first-child inside Shadow dom
將 lightDOM 追加<OPTIONs>到 ShadowDOM 中<SELECT`>
1. 您可以將它們從 lightDOM 移動到 ShadowDOM：
????let?select?=?this.shadowRoot.querySelector('select');????
????let?host?=?this.shadowRoot.getRootNode().host;????
????let?options?=?host.querySelectorAll('option');????
????select.append(...options);#1 是最簡單的，因為它不需要任何<slots>ShadowDOM
slotchange2. 對于在shadowDOM 模板中
需要（命名/未命名）的事件，您的思路是正確的。?您可以在以下位置找到 lightDOM 節(jié)點：<slot></slot>
MDN：分配的節(jié)點
MDN：分配元素
請注意，這會獲取所有節(jié)點類型，包括text節(jié)點，因為innerHTML 中存在換行符和空格<my-element>！
? ? <my-element>
? ? ? <option>Grow up</option>
? ? ? <option>Learn React</option>
? ? ? <option>Learn Lit</option>
? ? ? <option>Forget W3C standard Custom Elements API</option>
? ? ? <H1 slot=title>My Never Todo List</hH>
? ? </my-element>
幸運的是，他們<SELECT>不在乎，所以你可以assignedNodes直接倒進(jìn)去。
? ? this.shadowRoot.addEventListener('slotchange', (evt) => {
? ? ? if (!evt.target.name) { // only for unnamed slot
? ? ? ? this.shadowRoot.querySelector('select')
? ? ? ? ? ? .append(...evt.target.assignedNodes());
? ? ? }
? ? });
筆記！反映<options>到未命名的插槽，
<H1 slot=title> 反映到<slot name=title>
（他們應(yīng)該將它們命名為“reflections”而不是“slots”）
單擊“顯示代碼片段”以獲取完整代碼
customElements.define("my-element", class extends HTMLElement {
? connectedCallback() {
? ? let template = document.getElementById(this.nodeName);
? ? this.attachShadow({
? ? ? mode: 'open'
? ? }).append(template.content.cloneNode(true));
? ? this.shadowRoot.addEventListener('slotchange', (evt) => {
? ? ? if (!evt.target.name) { // only for unnamed slot
? ? ? ? let select = this.shadowRoot.querySelector('select');
? ? ? ? select.append(...evt.target.assignedNodes());
? ? ? }
? ? });
? }
})
<template id=MY-ELEMENT>
? <style>
? ? :host {
? ? ? display: block;
? ? }
? ? select{
? ? ? font-size:1.5em;
? ? }
? </style>
? <slot name=title></slot>
? <select multiple>
? </select>
? <slot></slot>
</template>
<my-element>
? <option>Grow up</option>
? <option>Learn React</option>
? <option>Learn Lit</option>
? <option>Forget W3C standard Custom Elements API</option>
? <h1 slot=title>My Never Todo List</h1>
</my-element>
具有兩個選項的 JSFiddle 游樂場：?https://jsfiddle.net/CustomElementsExamples/v2f9zmu5/
- 1 回答
- 0 關(guān)注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消