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

Question

我构建了一个自定义元素，并附加了一个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>

Answer 1

您需要在display: inline-block; margin:0; padding: 0值上设置:host，以使宿主元素适合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>