javascript - 当在边界外单击时，具有 onclick 事件的自定义元素会触发

Question

我构建了一个自定义元素，并附加了一个 onclick 事件监听器。宽度由 CSS 设置为 200px。当我将自定义元素附加到更宽的表格单元格时，事件监听器甚至捕获自定义元素外部(但在表格单元格内部)的点击。

当使用 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>

Answer 1

您需要设置display: inline-block; margin :0； :host 值上的 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>