Question

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

访问带槽的元素

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

sqlitehelper

但是它返回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

@royyko的回复。更好的答案是使用类或id来获取插槽...使用已经提供的标识符，即其名称。为此，您需要执行以下this.shadowRoot.querySelector('slot[name=interior]')

Web组件：如何使用shadowRoot.querySelector访问带槽的元素

2 个答案: