96
rated 0 times
[
99]
[
3]
/ answers: 1 / hits: 6729
/ 5 Years ago, mon, september 16, 2019, 12:00:00
Anchor elements (<a>) are created when the user interacts with a web component. The problem is, that I cannot get the anchor element returned from the "outside" of the web component when an anchor is clicked.
I add an event listener to document listening for click events. When an element somewhere in the DOM is clicked I expect the e.target to be the clicked element.
In the case of a click somewhere inside the web component the custom element (<fancy-list></fancy-list>) will be returned - not the clicked element.
When the mode of the shadow DOM is set to open the DOM should be accessible.
class Fancylist extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const wrapper = document.createElement('div');
wrapper.innerHTML = `<ul></ul><button>Add item</button>`;
shadow.appendChild(wrapper);
this.on_root_click = this.on_root_click.bind(this);
}
connectedCallback() {
this.ul_elm = this.shadowRoot.querySelector('ul');
this.shadowRoot.addEventListener('click', this.on_root_click, false);
}
on_root_click(e){
switch(e.target.nodeName){
case 'BUTTON':
this.ul_elm.innerHTML += '<li><a href=p1>List item</a></li>';
break;
case 'A':
e.preventDefault();
console.log('You clicked a link!');
break;
}
}
}
customElements.define('fancy-list', Fancylist);<!DOCTYPE html>
<html>
<head>
<title>List</title>
<meta charset=utf-8 />
<script type=text/javascript>
document.addEventListener('DOMContentLoaded', e => {
document.body.addEventListener('click', e => {
//console.log(e.composedPath());
console.log(e.target); // why is this not returning an anchor element when an anchor is clickend inside the <fancy-list>?
}, false);
}, false);
</script>
</head>
<body>
<h1>List</h1>
<fancy-list></fancy-list>
</body>
</html>
More From » dom
