Responding to this Twitter convo —
Let's say I'm building a blog post template page using from kind of front-end framework — for the sake of argument, we'll use Svelte. On this page, we'll have a share button that lets people share the blog post via Twitter.
Twitter makes this straightforward using their tweet web intent — just create an <a>
tag with the appropriate href
, and Twitter will take it from there. This is great — no need to faff around with an API.
But constructing the URL gets a bit unwieldy, so we'd like to turn it into a component:
<TwitterShare
text="Server-side rendering of web components is hard"
url="https://gist.github.com/Rich-Harris/587df5060fc895cda607139e7d41b95c"
via='sveltejs'
/>
When we render this on the server, this is the markup that gets generated:
<a svelte-3655588705="" target="_blank" href="https://twitter.com/intent/tweet?text=Server-side%20rendering%20of%20web%20components%20is%20hard&url=https%3A%2F%2Fgist.github.com%2FRich-Harris%2F587df5060fc895cda607139e7d41b95c&via=sveltejs">Share on Twitter</a>
Needless to say, this works everywhere, with or without JavaScript. If we do have JavaScript, then we can enhance the experience by creating a nicely-sized and -positioned popup window rather than opening a new tab. That's a good example of progressive enhancement.
You can see a demo of it here. Notice that we have encapsulated styles, and we can do sophisticated things like client-side hydration using a universal codebase.
As far as I'm aware, you simply cannot do this with web components. At a bare minimum, you need some JavaScript to hydrate the <twitter-share>
custom element.
So basically WC will allow you to enhance your Svelte/Vue/React/Skate app adding custom tags that might be rendered on the client by third party scripts leaving you the possibility to eventually progressively enhance them however you like, isn't that cool?!