DSD is an output format that server libs can create on the server! that all works and is largely available in browsers. there’s more tweaking to do on the format and reducing repeated dom/styles, but it’s there. the hard part is figuring out how to render native WC source code into DSD on the server. one of the major hard parts is know where the template is and/or what hooks to run etc. that’s why libs like Lit can have SSR packages but native WCs can’t. Lit has a defined way of building, native WCs don’t
This has been one of the best discussions about web components I've ever heard
39:03 web components are great for design systems
57:39 opinions in frameworks
1:04:17 performance
1:26:45 how *I* use web components
You should look into declarative shadow dom. To my knowledge that avanue is where SSR web components will come from.
DSD is an output format that server libs can create on the server! that all works and is largely available in browsers. there’s more tweaking to do on the format and reducing repeated dom/styles, but it’s there. the hard part is figuring out how to render native WC source code into DSD on the server. one of the major hard parts is know where the template is and/or what hooks to run etc. that’s why libs like Lit can have SSR packages but native WCs can’t. Lit has a defined way of building, native WCs don’t
You don't need ssr. If you need ssr, you probably are making websites, not web apps
Yes, that's exactly what I'm building
Maybe do:
customElements.define("reveal-button", class extends HTMLElement {
get cats() {
return (this.getAttribute("cats") || "").split(",");
}
connectedCallback() {
const catcount = this.cats.length;
this.replaceWith(
this.button = Object.assign(document.createElement("button"), {
textContent: `Reveal one of the ${catcount} cat names`,
onclick: () => {
this.button.textContent = this.cats[~~(Math.random() * catcount)];
}
})
);
}
});