在边界外单击时触发带有 onclick 事件的自定义元素答案

【问题标题】：Custom Element with onclick event fires when clicked outside boundaries在边界外单击时触发带有 onclick 事件的自定义元素
【发布时间】：2019-04-09 15:17:45
【问题描述】：

我构建了一个带有onclick eventListener 的自定义元素。宽度由 CSS 设置为 200px。当我将自定义元素附加到更宽的表格单元格时，eventListener 甚至会捕获自定义元素外部（但在表格单元格内）的点击。

当使用 Firefox Inspector 浏览元素时，自定义元素似乎填充了整个表格单元格，尽管它的宽度已设置。为什么会这样？

class Test extends HTMLElement {
  constructor() {
    super();

    var shadow = this.attachShadow( { mode: 'open' } );
    var f = document.createElement('font');
    f.innerHTML = 'text';

    var div = document.createElement('div');
    div.style.border = '1px solid black';
    div.style.width = '200px';

    this.addEventListener('click', function() {
      console.log('clicked');
    });

    div.appendChild(f);
    shadow.appendChild(div);
  }
}

customElements.define('my-test', Test);

<table border=1 style='border-collapse: collapse;'>
  <tr>
    <td style='width: 800px;' align='center'>
      <my-test></my-test>
    </td>
  </tr>
</table>

【问题讨论】：

标签： javascript html shadow-dom

【解决方案1】：

您需要在 :host 值上设置 display: inline-block; margin:0; padding: 0 以使宿主元素适合 shadowDOM 内子元素的整体大小

class Test extends HTMLElement {
  constructor() {
    super();

    var shadow = this.attachShadow( { mode: 'open' } );
    shadow.innerHTML = `<style>
    :host {
      background-color: #F99;
      border: 1px dashed #900;
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    </style>`;
    var div = document.createElement('div');
    div.style.backgroundColor = '#aaa';
    div.style.width = '200px';

    this.addEventListener('click', function() {
      console.log('clicked');
    });

    var f = document.createElement('font');
    f.innerHTML = 'text';
    div.appendChild(f);
    shadow.appendChild(div);
  }
}

customElements.define('my-test', Test);

<table border=1 style='border-collapse: collapse;'>
  <tr>
    <td style='width: 800px;' align='center'>
      <my-test></my-test>
    </td>
  </tr>
</table>

【讨论】：

谢谢。以前从未听说过主机属性。需要检查文档:)
:host 是包含元素。在您的情况下，:host 将设置 <my-test> 元素的样式。