时间戳

首页 > 解决方案 > 在插槽元素内强制焦点事件

web-component - 在插槽元素内强制焦点事件

问题描述

我正在尝试关注一个在自定义元素中使用的插槽元素内部的元素。

在我的自定义元素内部，我查询 slot 元素，而不是使用方法 .assignedElements，它只是一个 div，然后我在该元素内部查询以找到我想要的输入。之后，我使用 .focus() 方法很好地聚焦输入。但这不起作用。

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

我目前正在使用 Stencil 组件完成所有这些工作。

模板 Web 组件。

<tab-component> This is a web-component with a render method that returns <slot>
now I use tab-component inside of another web-component inside of it's render method, using a native yes, input.

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

标签： web-componentshadow-domcustom-element

解决方案

一些东西：

  1. 确保您正在使用该slotchange事件。
  2. 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>

推荐阅读