Web Components
· One min read
HTMLSlotElement
The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML <slot> element.
Life Cycle Callbacks
Special callback functions defined inside the custom element's class definition, which affect its behavior:
connectedcallback
Invoked when the custom element is first connected to the document's DOM.
disconnectedcallback
Invoked when the custom element is disconnected from the document's DOM.
adoptedcallback
Invoked when the custom element is moved to a new document.
attributechangedcallback
Invoked when one of the custom element's attributes is added, removed, or changed.
CSS pseudo-classes
:defined {}
:host {}
:host() {}
:host-context() {}
Access parent element
<wc-parent>
<wc-child>
<wc-subchild>
</wc-subchild>
</wc-child>
<wc-parent>
function findParent(startElement: Element | ShadowRoot, selector: string): Element | null {
let result: Element | null;
if (startElement instanceof HTMLElement) {
result = startElement.closest(selector);
if (result) {
return result;
}
}
const r = startElement.getRootNode();
if (r instanceof ShadowRoot) {
return findParent((r as ShadowRoot).host, selector);
}
return null;
}
// wc-subchild component
findParent(this.shadowRoot, 'wc-parent');
