A few weeks ago, I wrote about how I believe the Shadow DOM is an anti-pattern.
This has probably been one of my most controversial articles, with a lot of folks reaching out to tell me how important it is to have CSS that they absolutely know cannot be modified by outside CSS.
Let's imagine you have a Web Component that renders a button.
<button>Clicked 42 Times</button>
Let's also imagine you have a site that already has button styles, and you want that Web Component button to look just like the rest of them.
Without the Shadow DOM, you can do literally nothing and the the Web Component button will match the rest of your site.
/* Global CSS */ button { background-color: #0088cc; border: 1px solid #0088cc; border-radius: 0.25em; color: #ffffff; font-size: 1.2rem; padding: 0.5em 1em; } button:hover { background-color: #ffffff; color: #0088cc; }
With the Shadow DOM the Web Component button looks like a fully unstyled button.
The Web Component authors can apply their own styles inside the Web Component, and those styles apply just to the Web Component button, and cannot be influenced by outside styles.
// Render HTML this.root.innerHTML = `<style> button { background-color: #0088cc; border: 1px solid #0088cc; border-radius: 0.25em; color: #ffffff; font-size: 1.2rem; padding: 0.5em 1em; } button:hover { background-color: #ffffff; color: #0088cc; } </style> <button>Clicked ${this.count} Times</button>`;
Now, we're in a weird spot.
We've either recreated our existing global styles inside the Web Component, or we have styles for our Web Component button that don't match the global styles.
One way to address this is with CSS variables, which do pierce the Shadow DOM.
/* Global CSS */ button { --bg-color: #0088cc; --border-color: #0088cc; --border-radius: 0.25em; --color: #ffffff; --font-size: 1.2rem; --padding: 0.5em 1em; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--color); font-size: var(--font-size); padding: var(--padding); } button:hover { --bg-color: #ffffff; --color: #0088cc; } my-web-component { --bg-color: #0088cc; --border-color: #0088cc; --border-radius: 0.25em; --color: #ffffff; --font-size: 1.2rem; --padding: 0.5em 1em; }
// Render HTML this.root.innerHTML = `<style> button { background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--color); font-size: var(--font-size); padding: var(--padding); } </style> <button>Clicked ${this.count} Times</button>`;
This doesn't address :hover styles. We'd need separate CSS variables for those. And it just makes the whole thing… harder than it needs to be?
I'm certain there are situations where unintended CSS collisions happen.
You know what else can fix that? People who write CSS knowing how to write CSS. And debug it. And fix it.
Throwing increasingly complex solutions are easily solvable problems feels like two steps backwards.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] Do you really want to encapsulate your CSS? (probably not)"