I am currently facing a challenge in retrieving the coordinates of a table cell within a shadow DOM. This table cell may have overlay elements displayed above it, which could span over multiple cells and may not necessarily be direct children of the cell I am interested in.
Despite my efforts to make the event bubble through the table as expected, I suspect that event retargeting within the shadow DOM is causing issues. Additionally, attaching an event listener to every cell for performance reasons (considering there will be hundreds of cells in the final application) is something I'd like to avoid.
The use of "pointer-events: none;" property seems close to solving my issue, however, I also need the event to trigger on the light DOM overlay element. Given that the overlay element is not a child of the cell where I want to obtain the coordinates from, I'm unsure if this approach is feasible.
In my implementation using vanilla JavaScript, I wonder if there is a way to correctly retrieve the coordinates of the underlying table cell when the overlay div is clicked.
class Custom_Grid extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: 'open'
});
this.shadowRoot.innerHTML = `
<style>
td {
height:50px; width:50px; border: 1px solid grey;
}
</style>
<table>
<tr>
<td id='x0y0'><slot name='x0y0'></slot></td>
<td id='x0y1'><slot name='x0y1'></slot></td>
<td id='x0y2'><slot name='x0y2'></slot></td>
</tr>
<tr>
<td id='x1y0'><slot name='x1y0'></slot></td>
<td id='x1y1'><slot name='x1y1'></slot></td>
<td id='x1y2'><slot name='x1y2'></slot></td>
</tr>
<tr>
<td id='x2y0'><slot name='x2y0'></slot></td>
<td id='x2y1'><slot name='x2y1'></slot></td>
<td id='x2y2'><slot name='x2y2'></slot></td>
</tr>
`;
}
connectedCallback() {
this.shadowRoot.addEventListener("click", () => {
if (e.target.matches('td'))
console.log(`Grid Cell: ${e.target.id}`)
});
}
}
window.customElements.define('custom-grid', Custom_Grid);
document.getElementById('grid_overlay').addEventListener("click", () => {
console.log("#overGrid Click")
});#grid_overlay {
width: 100px;
height: 100px;
background-color: grey;
position: absolute;
}<custom-grid>
<div slot='x1y0' id='grid_overlay'></div>
</custom-grid>