Let's be friends

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.

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.

Let's be friends