Javascript 从web组件中的选定选项获取值

我正在尝试获取所选选项的值，以便有人使用我的web组件时可以访问它。我认为问题与影子根有关

__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>

---

我的评论太快了

不能像“普通”DOM元素那样作为目标 像许多人一样，你正陷入思考时隙内容的陷阱 移动到阴影区

事实并非如此

开槽内容只反映在shadowDOM中，它仍然不可见！轻松

无法使用.querySelector或.children[]访问反射的内容 ... 因为它不在阴影中。。它仍然很轻

出于同样的原因，您可以在lightDOM中设置开槽内容的样式：

将lightDOM附加到shadowDOM中 一,。您可以将它们从光域移动到阴影域：

1是最简单的一个，因为它在shadowDOM中不需要任何

二,。你在slotchange事件中走对了方向 它需要shadowDOM模板中的命名/未命名。 您可以在以下位置找到lightDOM节点：

请注意，这会使您包括所有文本节点，因为innerHTML中有换行符和空格

    <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>

注意！这些数据被反射到未命名的插槽中， 反映到

他们应该把它们命名为反射而不是插槽

单击“显示代码段”查看完整的代码

customElements.definemy-element，类扩展HtmleElement{ connectedCallback{ 让template=document.getElementByIdthis.nodeName； 这是阿塔奇沙多{ 模式：“打开” }.appendtemplate.content.cloneNodetrue； this.shadowRoot.addEventListener'slotchange'，evt=>{ if！evt.target.name{//仅适用于未命名插槽 让select=this.shadowRoot.querySelector'select'； 选择.追加…evt.target.assignedNodes； } }; } } ：主持人{ 显示：块； } 挑选{ 字号：1.5em； } 长大 学习反应 学习照明 忘记W3C标准自定义元素API 我的永不待办事项清单

---

您不能将选项插入选择中。请参阅副本：@Danny'365CSI'Engelman我在选择中没有插槽，问题与此无关。非常感谢您。回答丹尼。我遇到了这样一个问题：如果有人使用我的web组件my element，他们如何获得select的值。假设用户无法访问组件的逻辑。所以他们只需要在项目中导入组件并开始使用它，模式为：open他们可以始终访问document.querySelector'my-element'。shadowRoot.querySelector'select'。或者添加一个返回指向的指针的方法。但是我想你应该抽象出所有与to属性相关的东西，也许使用扩展HTMLSelectElement的定制内置元素，而不是扩展HTMLElement的自治元素，在这方面使用额外的方法会容易得多。因此，如果您不必交付给Safari，您可以扩展所有其他浏览器中支持的SELECT

    <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>

    this.shadowRoot.addEventListener('slotchange', (evt) => {
      if (!evt.target.name) { // only for unnamed slot
        this.shadowRoot.querySelector('select')
            .append(...evt.target.assignedNodes());
      }
    });