* What is ::part() css pseudo-element useful for?
The ::part() pseudo-element allows the styling of a specific, purposely exposed elements in a shadow treee from outside the page's context. This allows the outside page to interact in safe, powerful ways, with the element while maintaining encapsulation without surrendering all control.
* What actions can be performed during the lifecycle callback: connectedCalback?
Setup code - like fetching data, or setting default attributes can be performed during connectedCallback.
* What is the purpose of shadowDOM?
The purpose of the shadowDOM is to separate and hide the structure, style and behavior of your custom element from the rest of the page. It is a type of encapsulation. This keeps different parts of your page from clashing and helps keep the code nice and clean.
* If you want to peek/query inside the ShadowDOM using DOM api methods, which element in the ShadowDOM do you hook into?
The shadowRoot.
* Can you give an example for what you'd use the <slot> tag for?
You could use the <slot> tag to designate dynamic/customizable text in a template.
The ::part() pseudo-element allows the styling of a specific, purposely exposed elements in a shadow treee from outside the page's context. This allows the outside page to interact in safe, powerful ways, with the element while maintaining encapsulation without surrendering all control.
* What actions can be performed during the lifecycle callback: connectedCalback?
Setup code - like fetching data, or setting default attributes can be performed during connectedCallback.
* What is the purpose of shadowDOM?
The purpose of the shadowDOM is to separate and hide the structure, style and behavior of your custom element from the rest of the page. It is a type of encapsulation. This keeps different parts of your page from clashing and helps keep the code nice and clean.
* If you want to peek/query inside the ShadowDOM using DOM api methods, which element in the ShadowDOM do you hook into?
The shadowRoot.
* Can you give an example for what you'd use the <slot> tag for?
You could use the <slot> tag to designate dynamic/customizable text in a template.