This content originally appeared on Go Make Things and was authored by Go Make Things
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.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-07-12T14:30:00+00:00) Do you really want to encapsulate your CSS? (probably not). Retrieved from https://www.scien.cx/2024/07/12/do-you-really-want-to-encapsulate-your-css-probably-not/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.