Styling your host from within shadow dom
The :host declaration in CSS is a functional pseudo-class used in Web Components, specifically within Shadow DOM. When you create a custom element with Shadow DOM, the :host pseudo-class allows you to define styles that will apply to the host element of the shadow tree. This means you can style the custom element rather than just its content. For instance, if you create a custom <my-element> tag and attach a shadow DOM to it, using :host in your CSS (inside the shadow DOM) lets you set properties like background color, margin, or padding directly on <my-element>. This is particularly useful for encapsulating styles in web components, as it allows the component to have its own isolated styling that doesn't bleed into the rest of the page or get affected by external styles.