Question

我正在尝试聚焦于自定义元素中使用的slot元素内部的元素。

在我的自定义元素中，我查询了slot元素，然后使用了.assignedElements方法（仅一个div），然后在该元素中进行查询以查找所需的输入。之后，我使用方法.focus（）很好地集中了输入。.但这不起作用。

请让我知道是否有人可以帮助您

我目前正在使用Stencil组件。

模板Web组件。

orderable_stack

老实说，如果有任何尝试访问Web组件插槽内的输入的经验，请告诉我们。

Answer 1

几件事：

确保您正在使用slotchange事件。
assignedElements返回元素数组，而不是单个元素。因此，您必须像对待数组一样对待它。

下面的示例获取assignedElements，然后过滤掉我要寻找的那个，然后在该元素上调用focus()。

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML="<slot></slot>";
    let slot = this.shadowRoot.querySelector('slot');
    slot.addEventListener('slotchange', 
      e => {
        let el = slot.assignedElements().filter(
          node => node.classList.contains('focus')
        );
        if (el) {
          el[0].focus();
        }
      }
    );
  }

  connectedCallback() {
  
  }
}

customElements.define('my-el', MyEl);

<my-el>
  <input type="text" placeholder="I am not focused"/>
  <input type="text" placeholder="I am focused" class="focus"/>
</my-el>

在插槽元素内强制聚焦事件

1 个答案: