How do I apply common CSS classes to shadow elements?

If you are using Shadow DOM to encapsulate styles and structure within a custom element, applying common CSS classes to shadow elements requires a specific approach. The primary idea behind Shadow DOM is to encapsulate styles and avoid style leakage from the component to the global scope and vice versa.Here's how you can apply common CSS classes to shadow elements in a web component with Shadow DOM:### Using ::part and ::theme1. **Define Parts and Themes:** - In your shadow DOM, use the `::part` pseudo-element to define specific parts of your component that you want to style externally. - Additionally, use the `::theme` pseudo-element to define a theme for your component. ```html <!-- Your custom element with Shadow DOM --> <template id="your-component-template"> <style> :host { display: block; } /* Style the specific part */ ::part(button) { background-color: var(--button-background-color, #3498db); color: var(--button-color, #ffffff); } /* Apply a theme */ ::theme(light) { --button-background-color: #3498db; --button-color: #ffffff; } ::theme(dark) { --button-background-color: #333; --button-color: #ffffff; } </style> <button part="button">Click me</button> </template> ```2. **Create Instances with Different Themes:** - When creating instances of your custom element, apply different themes using the `theme` attribute. ```html <!-- Usage of your custom element --> <your-component theme="light"></your-component> <your-component theme="dark"></your-component> ```3. **Apply External Styles:** - In the external stylesheet or document where you use your custom element, use the `::part` pseudo-element to style the specific part. ```css /* External stylesheet */ your-component::part(button) { border: 1px solid #ccc; padding: 10px; font-size: 16px; } ```### Using ::slotted1. **Define Shadow DOM Structure:** - In your shadow DOM, use the `::slotted` pseudo-element to style content projected into your custom element. ```html <!-- Your custom element with Shadow DOM --> <template id="your-component-template"> <style> :host { display: block; } ::slotted(button) { background-color: var(--button-background-color, #3498db); color: var(--button-color, #ffffff); } </style> <slot></slot> </template> ```2. **Use the Custom Element:** - When using your custom element, slot in the content you want to style. ```html <!-- Usage of your custom element --> <your-component> <button>Click me</button> </your-component> ```3. **Apply External Styles:** - In the external stylesheet or document where you use your custom element, style the slotted content. ```css /* External stylesheet */ your-component button { border: 1px solid #ccc; padding: 10px; font-size: 16px; } ```These are just two approaches, and the choice depends on your specific use case. The `::part` and `::slotted` pseudo-elements allow you to expose specific elements for styling, maintaining the encapsulation provided by Shadow DOM. read less