Let’s take this example:
Example
:host {
display: block;
font-family: system-ui;
margin: auto;
width: fit-content;
}
::slotted(img) {
border-radius: 1em;
}
Check out this cool dog!
customElements.define(
"cool-dog",
class extends HTMLElement {},
);
First off, what’s with the pointless JavaScript? There’s no need for imperative code here. All web components have a dash in the name; this can be inferred. But even if you want it to be explicit, this could be done with markup not imperative code. But no, it doesn’t work without the pointless JavaScript ritual.
Now, I’ve noticed that since the text is a caption for the image, I should actually use and . So let’s do that:
Example
:host {
display: block;
font-family: system-ui;
margin: auto;
width: fit-content;
}
::slotted(img) {
border-radius: 1em;
}
Check out this cool dog!
customElements.define(
"cool-dog",
class extends HTMLElement {},
);
Wait a sec! The nice round corners on the image have turned into ugly square ones. Why is that?
It’s because web components can’t style anything other than their direct children. You can style the when it’s a direct child of the web component, but as soon as you need anything more complex than an entirely flat hierarchy, you run into problems. Even if it’s something as simple as wrapping an in a to associate it with a .
What’s the “official” way of getting things like this done when you bring it up with the people working on the specs? Make a custom property to fake the real one and then set a global style that listens to the fake property to set it on the real one:
Example
img {
border-radius: var(--border-radius);
}
:host {
display: block;
font-family: system-ui;
margin: auto;
width: fit-content;
--border-radius: 1em;
}
Check out this cool dog!
customElements.define(
"cool-dog",
class extends HTMLElement {},
);
Now let’s say I want to put a second element on the page. What does that look like? You define the template once and then just use a bunch of times? That would be the obvious thing to do, right? Since it’s a template?
Nope. Every instance of the web component needs its own . The best you can do is write some JavaScript to copy the template into each one.
The developer ergonomics of this stuff is terrible. It’s full of weird limitations and footguns.