@semolina-solutions/layer-aware-pointer-events
v0.1.3
Published
A dependency-free toolkit for addressing issues in enacting `MouseEvent` propagation across stacked layers of sibling `Element` objects involving Shadow DOMs.
Downloads
2
Readme
layer-aware-pointer-events
A dependency-free toolkit for addressing issues in enacting MouseEvent
propagation across stacked layers of sibling Element objects involving
Shadow DOMs.
Install
npm install @semolina-solutions/layer-aware-pointer-events
Usage
For a structure like:
<html>
<head>
<style>
#container {
position: relative;
}
#container > * {
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<my-web-component id="background"> </my-web-component>
<my-web-component id="foreground"> </my-web-component>
</div>
</body>
</html>Where <my-web-component> has an attached Shadow DOM with inner elements, we
can ensure elements within both #foreground and #background receive
click events, and through Shadow DOM boundaries, using the following
handler attachment:
import { dispatchToUnderlyingElements } from '@semolina-solutions/layer-aware-pointer-events'
const element = document.querySelector('#container')
element.addEventListener('click', dispatchToUnderlyingElements)