Safari doesn't have as many engineers (a shame) and definitely doesn't have as many people whose apparent job is just to sit on standards committees and generate specs (like Alex Russel, Justin Fangnani etc.).
They did end up proposing declarative template instantiation in 2017: https://github.com/WICG/webcomponents/blob/gh-pages/proposal... but that mostly went nowhere
It really is a shame Apple don’t invest more in WebKit and the web standards process. Although they’ve been doing a lot better over the past few years.
<my-component>
<template shadowrootmode="open">
<style>
::slotted(*) {
font-weight: bold;
font-family: sans-serif;
}
</style>
<slot></slot>
</template>
<p>content</p>
</my-component>Or that their mere existence infects nearly every spec in existence delaying and needlessly complicating actual useful specs like Scoped CSS?
- doesn't require 20+ web specs
- doesn't forget and then scramble to fix the most basic expected functionality like form participation
- doesn't pollute the space so badly that actual useful specs like Scoped CSS are delayed for years because now they have to deal with all the web coponent shenanigans
- hopefully doesn't take 15 years to barely do what others have been doing since time immemorial
<!DOCTYPE html>
<title>Example</title>
<cool-dog>
<template shadowrootmode="open">
<style>
:host {
display: block;
font-family: system-ui;
margin: auto;
width: fit-content;
}
::slotted(img) {
border-radius: 1em;
}
</style>
<slot></slot>
</template>
<img
src="https://placedog.net/512/342?random"
width="512"
height="342"
alt="A dog"
>
<p>Check out this cool dog!</p>
</cool-dog>
<script>
customElements.define(
"cool-dog",
class extends HTMLElement {},
);
</script>
Now, I’ve noticed that since the text is a caption for the image, I should actually use <figure> and <figcaption>. So let’s do that:
<!DOCTYPE html>
<title>Example</title>
<cool-dog>
<template shadowrootmode="open">
<style>
:host {
display: block;
font-family: system-ui;
margin: auto;
width: fit-content;
}
::slotted(img) {
border-radius: 1em;
}
</style>
<slot></slot>
</template>
<figure>
<img
src="https://placedog.net/512/342?random"
width="512"
height="342"
alt="A dog"
>
<figcaption>Check out this cool dog!</figcaption>
</figure>
</cool-dog>
<script>
customElements.define(
"cool-dog",
class extends HTMLElement {},
);
</script>
It’s because web components can’t style anything other than their direct children. You can style the <img> 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 <img> in a <figure> to associate it with a <figcaption>.
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:
<!DOCTYPE html>
<title>Example</title>
<style>
img {
border-radius: var(--border-radius);
}
</style>
<cool-dog>
<template shadowrootmode="open">
<style>
:host {
display: block;
font-family: system-ui;
margin: auto;
width: fit-content;
--border-radius: 1em;
}
</style>
<slot></slot>
</template>
<figure>
<img
src="https://placedog.net/512/342?random"
width="512"
height="342"
alt="A dog"
>
<figcaption>Check out this cool dog!</figcaption>
</figure>
</cool-dog>
<script>
customElements.define(
"cool-dog",
class extends HTMLElement {},
);
</script>
Nope. Every instance of the web component needs its own <template>. 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.
Exactly, I'm not sure why you've included the JS. The whole point of the Declarative Shadow DOM is to create shadow roots declaratively, rather than imperatively. To quote web.dev "This gives us the benefits of Shadow DOM's encapsulation and slot projection in static HTML. No JavaScript is needed to produce the entire tree, including the Shadow Root." [1]
[1] https://web.dev/articles/declarative-shadow-dom#how_to_build....
It's a pipe dream that doesn't work in practice. Because on its own declarative shadow dom is useless.
The example I was responding to was using the Declarative Shadow DOM. My comment was intended to point out the simple fact that the imperative component definition the author was complaining about is superfluous, meaning you can safely remove that entire script from the example.
DSD is useful for SSRing web components, which allows them to render and work without JS. But honestly, I don't get the obsession with doing stuff without JS, it's part of the html/css/js trifecta.