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

Question

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

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

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

但它返回null。

请帮忙。

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

Answer 2

Going off of @royyko 's response. The better answer here is instead of giving a class or id with the purpose to grab the slot... use the already provided identifier, its name. To do this you would do the following this.shadowRoot.querySelector('slot[name=interior]')