8. Hello web components

Requirements

• Develop custom element. Make it as simple or as complex as you like.
• Isolate your element by using a shadow DOM. No styles should be leaking out of your web component.
• Write it in plain JS. (Don’t use 3th-party libraries like Lit)
• ⭐ Use at least 1 CSS custom variable to style something inside your web component from outside of the shadow DOM

Design preview

Personal preference

Resources

• Web components MDN
• Learn Web Components In 25 Minutes Video

Learn more

• Slots
• CSS ::host
• CSS ::part
• CSS adoptedStyleSheets
• Declarative Shadow DOM
• Open Web components
• Going Buildless: ES Modules
• Webcomponents.org
• Web components in Google IO 2019
• Demystifying web components

Discussion topics

• Component encapsulation
• Style leaking and inheritance with shadow DOM
• Customizing the component from the host document when using custom properties and “part”
• Life-cycle events
• Attributes vs Properties
• The slot element
• Template literals interpolation