Summary

This PR enhances the Stencil documentation to explain how global styles work with shadow DOM components through constructable stylesheets, and provides examples of targeting specific components using the :host() pseudo-class.

This hasn't worked before but was implemented in stenciljs/core#6268 and will be released with the next minor release.

Motivation

The current documentation mentions global styles but doesn't explain how they interact with shadow DOM components. Users may not realize that global styles can directly target and style shadow DOM components, or how to use the :host() selector effectively for component-specific styling.

Changes

Documentation Updates

• Added Constructable Stylesheets section to docs/components/styling.md

  • Explains how global styles are automatically registered to every shadow root
  • Provides practical examples of targeting components by tag name
  • Shows how to use attribute selectors with :host()
  • Lists common use cases for this approach

• Updated globalStyle config documentation in docs/config/01-overview.md

  • Added mention of constructable stylesheets integration
  • Clarifies that global styles can target shadow DOM components directly

Key Examples Added

/* Target specific component types */
:host(my-button) {
  --button-border-radius: 8px;
  display: inline-block;
}

/* Use attribute selectors */
:host(my-input[type="password"]) {
  --input-font-family: monospace;
}

Benefits

• Better developer experience: Developers now understand how to style shadow DOM components globally
• Improved styling capabilities: Clear guidance on using :host() selectors for component-specific theming
• Complete documentation: Fills a gap in the styling documentation about shadow DOM and global styles interaction

Notes

• Added important note about :host() selector limitations with scoped components
• Maintains consistency with existing documentation style and formatting
• All examples are practical and commonly used patterns

Related

• Complements existing shadow DOM and global styles documentation
• Enhances understanding of Stencil's styling capabilities for both beginners and advanced users