Issue
Within a custom component defined with <template> and <slot> tags, a child element can get the parent element that is the custom component, and then use this element reference to access class defined vars and functions.
However, how can a child element know which element is the custom component?
The template itself is contained in a shadow DOM. When rendering a custom component on the page, this shadow DOM is cloned and attached into the custom component as its host.
Elements that are slotted in to the custom component however can't seem to tell the node tree it is attached to came from a shadow DOM node that was cloned, and can't tell which element in the current DOM tree is the top level custom component unless it iterates through each parentNode to check if they have a shadowRoot.
What is the way to let a child element inside a custom component access the custom component's class variables and functions?
customElements.define("my-comp", class extends HTMLElement {
creationTimestamp;
constructor() {
super();
let template = document.getElementById('my-template');
let templateContent = template.content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(templateContent.cloneNode(true));
this.creationTimestamp = Date.now();
}
})<html>
<template id="my-template">
I'm a new custom component using slots with value <slot name="slot1">default</slot>
<button onclick="console.log(this.parentNode.host.creationTimestamp)">Print timestamp at Template level</button>
</template>
<my-comp>
<span slot="slot1">
slotted value
<div>
<button onclick="console.log(this.parentNode.parentNode.parentNode.creationTimestamp)">Print timestamp</button>
</div>
</span>
</my-comp>
</html>Solution
The simple rules I use for decoupling are:
Parent to child: one-way data-binding or HTML5 attributes for passing data and calling
child.func()for performing actions.Child to parent: Child fires an event. The parent(s) listen for that event. Because of event bubbling you can have an arbitrary number of parents picking up that event with no extra effort.
This pattern is used by standard web components as well (input, textbox etc). It also allows easy testing since you don't have to mock the parent.
This was the recommended pattern described by the Polymer library, which was/is a wrapper over WebComponents. Unfortunately I can't find that article.
In the following example, the parent listens for events from children and calls functions on itself to affect its state, or functions on the children to make them do something. None of the children know about the parent.
Answered By - nicholaswmin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.