skills.rest
atomicojs
atomicojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

atomico-css-styling

Creates scoped, cacheable stylesheets for Atomico components using adoptedStyleSheets and CSS custom properties.

1.3k|44|Updated Aug 25, 2018
Search Tags:#theming#css#web-components#shadow-dom#css-custom-properties#atomico#adoptedstylesheets
One-click install
npx skills add https://github.com/atomicojs/atomico --skill atomico-css-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: atomico-css-styling
Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-css-styling
Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-css-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about atomico-css-styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply scoped CSS to web components in shadow DOM without duplicating styles?▼

To apply scoped CSS to web components in shadow DOM, use the css tagged template literal to generate cached CSSStyleSheet instances applied via adoptedStyleSheets, preventing style tag injection and stylesheet duplication across components.

How does adoptedStyleSheets work for theming custom properties in Atomico?▼

adoptedStyleSheets works for theming by applying reusable CSSStyleSheet instances to the shadowRoot, allowing components to define and override CSS custom properties for themeable styling directly from the host page.

What is the best way to compose multiple stylesheets for a single web component?▼

The best way to compose multiple stylesheets is creating an array of css template literals for base rules, themes, and overrides, then applying the combined array directly to the shadowRoot.adoptedStyleSheets property.

Does Atomico support adoptedStyleSheets for component styling out of the box?▼

Atomico supports adoptedStyleSheets for component styling when using version 1.79 or higher with shadowDom enabled, requiring browsers that natively support adoptedStyleSheets to apply cached CSSStyleSheet instances.

Why use CSSStyleSheet instances instead of style tags for shadow DOM styling?▼

CSSStyleSheet instances replace style tags for shadow DOM styling to reduce memory consumption and reflow costs, as the adoptedStyleSheets API reuses a single cached stylesheet object across multiple component instances.

Related Skills

Explore More Software Engineering Skills→
atomicojsatomicojs
1.3k

atomico-hooks-async

Generate dynamic PDFs with customizable layouts and formats for your application's needs.

Official
Advanced
albanistrefialbanistrefi
4

umbraco-theme

Generate Umbraco backoffice theme manifests and CSS using --uui-color-* variables.

Community
Intermediate
atomicojsatomicojs
1.3k

atomico-jsx-patterns

Guide JSX patterns for type-safe Atomico web components.

Official
Intermediate
yw662yw662
6

shadow-dom-styling

Style Rikka custom elements with Shadow DOM stylesheets and inline style objects.

Community
Intermediate