atomico-css-styling

What problem does it solve?

Many Atomico developers need a performant, themeable, and component-scoped way to apply CSS inside shadow DOM without injecting style tags or duplicating stylesheet instances across components. This Skill explains how to author, cache, and apply CSSStyleSheet objects using the css tagged template and adoptedStyleSheets so styles are efficient and consistent.

Core Features & Use Cases

• Scoped, high-performance styles: Use css template literals to produce CSSStyleSheet instances that are reused across components to reduce memory and reflow costs.
• Theming with custom properties: Define and override CSS custom properties to create themeable components that can be styled from the host page.
• Composability and multiple stylesheets: Compose arrays of styles for shared base rules, themes, and component-specific overrides, and apply them via shadowRoot.adoptedStyleSheets.
• Use case: Build a reusable card component with base layout styles and a separate theme stylesheet so multiple card variants share a single cached stylesheet instance.

Quick Start

Add a css template literal to your Atomico component's styles option so the component applies a cached CSSStyleSheet via adoptedStyleSheets.