单击外部边界时触发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，使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>