Native web components
Introduction
Notes for later:
https://adamsilver.io/blog/the-problem-with-web-components/
https://lea.verou.me/blog/2020/09/the-failed-promise-of-web-components/
https://dev.to/emileperron/web-components-in-2021-the-good-the-bad-and-the-ugly-3kg
https://paularmstrong.dev/blog/2023/03/11/why-we-do-not-write-web-components/
https://daverupert.com/2023/07/why-not-webcomponents
https://web-highlights.com/blog/are-web-components-dead/
You're on a small screen! Some modules like CodePen examples will behave differently here. You'll need to toggle through their tabs to see all the code. For the best experience, consider using a bigger screen.
Classes from outside
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
Styling child elements
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
Global custom properties
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
Define global CSS variables and use them within the web component to allow external styling control. This helps in maintaining consistent themes and styles across components.
Using ::part
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
Use the part attribute within the web component to expose specific elements and the ::part pseudo-element in the global stylesheet to apply styles to these exposed elements. This combination allows for targeted global styling while maintaining encapsulation of the web component’s internal structure and styles.
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
Use adoptedStyleSheets to apply shared styles across multiple shadow DOMs. This technique involves creating a CSSStyleSheet object and adopting it within each web component, ensuring consistent styling while maintaining encapsulation.