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/
Classes from outside
See the Pen Classes from outside by perpetual.education (@perpetual-education) on CodePen.
Styling child elements
See the Pen Styling child elements by perpetual.education (@perpetual-education) on CodePen.
Global custom properties
See the Pen Global custom properties 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 Using ::part 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 BagaQVd 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.