adoptedStyleSheets property

Stylesheet? get adoptedStyleSheets

Returns the stylesheet to apply to this component's shadow DOM.

Override this getter to provide component styles. The styles will be automatically applied to the shadow root during hydration using the efficient adoptedStyleSheets API.

Benefits:

  • Styles are parsed once and cached
  • More efficient than creating <style> elements
  • Works seamlessly with type-safe CSS API

Note: For SSR, you should still include styles in your template. This is only for browser-side hydration.

Example

@override
Stylesheet? get adoptedStyleSheets => css({
  ':host': .typed(
    display: .block,
    padding: .all(.px(16)),
  ),
  'button': .typed(
    backgroundColor: .hex('#2196f3'),
    color: .white,
  ),
});

Implementation

Stylesheet? get adoptedStyleSheets => null;