shadowRoot.activeElement 在 Safari 中不起作用答案

【问题标题】：shadowRoot.activeElement is not working in safarishadowRoot.activeElement 在 Safari 中不起作用
【发布时间】：2019-07-12 02:44:40
【问题描述】：

目前我正在研究具有实现 shadow dom 功能的 stencilJS。我面临一个与 shadowRoot 的 activeElement 相关的问题。它在 Chrome 上运行良好，但是当我测试我的组件时，activeElement 在 safari 中变为 null。

这里是代码sn-p

import { Component, Prop, Listen } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string;

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  @Listen('click')
  onHadnleClickEvent(ev) {
    console.log('===== 31 =====', ev.target.shadowRoot.activeElement)// getting null in safari
  }

  render() {
    return ( <div>
        <button>Click Me!!!</button>
      </div>
    )
  }
}

【问题讨论】：

禁用 Shadow DOM 是否有效？如果不是，那么它可能连接到developer.mozilla.org/en-US/docs/Web/HTML/Element/…
@Thomas 是的。使用 activeElement 来获取点击元素是我的无知。我发现composedPath()[0] 适合获得所需的行为。

标签： web-component shadow-dom stenciljs

【解决方案1】：

我找到了启用shadowDom时获得点击元素的结果。这是解决方案：

  @Listen('click')
  onHadnleClickEvent(ev) {
    console.log('===== 31 =====', ev.composedPath()[0]// It will give you the clicked element
  }

【讨论】：