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 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.