Web 组件：如何使用 shadowRoot.querySelector 访问开槽元素答案

【问题标题】：Web Components: how to access a slotted element using shadowRoot.querySelectorWeb 组件：如何使用 shadowRoot.querySelector 访问开槽元素
【发布时间】：2019-02-24 04:13:24
【问题描述】：

您好，我是 Web 组件概念的新手。我想知道我们是否可以使用 shadowRoot.querySelector 访问开槽元素

我已经实现了一个输入字段作为动态设置一些值的槽。并添加一个类“列标题”。我正在尝试像这样访问 connectedCallback() 中的这个元素

var titleInput = this.shadowRoot.querySelector('.column-title')

但它返回 null。

请帮忙。

【问题讨论】：

标签： javascript web-component native-web-component

【解决方案1】：

我不确定问题是什么，但您应该能够使用querySelector 及其类获得一个插槽。我在下面模拟了一个示例。

控制台将打印出对插槽的引用。如果您只是为了找到插槽而附加一个类，那么最好设置一个 id（假设它在影子根中）并使用 this.shadowRoot.getElementById('my-slot-id') 找到它

customElements.define('blue-box',
  class extends HTMLElement {
    constructor() {
      super();
      var template = document
        .getElementById('blue-box')
        .content;
      const shadowRoot = this.attachShadow({
          mode: 'open'
        })
        .appendChild(template.cloneNode(true));
    }
    
    connectedCallback() {
    	console.log(this.shadowRoot.querySelector('slot.target-slot'));
    }
  });

<template id="blue-box">
  <style>
  .blue-border {
    border: 2px solid blue;
    padding: 5px;
    margin: 5px;
  }
  </style>
  <div class='blue-border'>
    <slot name='interior' class='target-slot'>NEED INTERIOR</slot>
  </div>
</template>

<blue-box>
  <span slot='interior'>My interior text</span>
</blue-box>
<blue-box>
  <span slot='interior'>
  Check Here: <input type='checkbox'>
  </span>
</blue-box>

【讨论】：

我现在可以获取元素了。我正在动态添加类。当我直接在模板槽元素上给出类名时，它工作正常。感谢您的帮助！

【解决方案2】：

离开@royyko 的回应。这里更好的答案是而不是提供一个类或 id 来获取插槽......使用已经提供的标识符，它的名称。为此，您需要执行以下操作 this.shadowRoot.querySelector('slot[name=interior]')

【讨论】：