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

Question

I built a custom element with an onclick eventListener attached to it. The width is set by CSS to 200px. When I append the custom element to a wider table cell, the eventListener even catches clicks outside the custom element (but inside the table cell).

When exploring the element with the Firefox Inspector it seems that the custom element fills the whole table cell although its width is set. Why is that happening?

 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

You need to set display: inline-block; margin:0; padding: 0 display: inline-block; margin:0; padding: 0 display: inline-block; margin:0; padding: 0 on the :host value to make the host element fit the overall size of the children inside the 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>