The Shadow DOM acts as a protective shield for web components, isolating internal styles and markup. While beneficial for modularity, it poses challenges in sharing common utility classes.
Adopted stylesheets, a new browser feature, allow the creation of CSSStyleSheet objects that can be shared among multiple shadow roots and the main document. This feature enhances efficiency by preventing duplication and simplifying theming.
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>My App</title> <style type='text/css' id='my-theme-sheet'> .u-position-relative { position: relative; } </style> <script src="button.js"></script> </head> <body> <my-button></my-button> </body> </html> // button.js class MyButton extends HTMLElement { constructor() { super(); ...
[
add
]
[
|
|
...
]