Web Components

https://www.notion.so/Web-Components-97c73d287ed84ce0896fb9f5665037dd

HTMLSlotElement

The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML <slot> element.

graph LR
  HTMLSlotElement --> HTMLElement
  HTMLElement --> Element
  Element --> Node
  Node --> EventTarget

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

1
2
3
4
:defined {}
:host {}
:host() {}
:host-context() {}

Access parent element

1
2
3
4
5
6
<wc-parent>
	<wc-child>
	  <wc-subchild>
	  </wc-subchild>
	</wc-child>
<wc-parent>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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');
This post is licensed under CC BY 4.0 by the author.