Web Components bookmarksA curated collection of Web Components resources2023-10-06T11:39:04Zhttps://webcomponents.today/Serhii Kulykoviamkulykov@gmail.com2023 February Update2023-02-28T00:00:00Zhttps://webcomponents.today/2023-02-update/<p>The second monthly update in 2023 is not as fancy as the <a href="https://webcomponents.today/2023-01-update/">previous one</a> — if you
haven't seen that one yet, do check it out! Today I'm really pleased to share with you a follow-up
on some topics covered earlier. On top of that, there have been quite a few other positive news and
discussions around Web Components lately. My today's post is a just a brief overview.</p>
<h3>Safari 16.4 beta</h3>
<p><a href="https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes">Safari 16.4 beta</a>
is now available for downloading on supported platforms. Feature wise this release is really great,
even though it isn't specifically about Web Components, but the web platform in general, including
HTML, CSS, JavaScript, forms, and more. Two great features have been included to this beta release,
alongside with official introduction on WebKit blog:</p>
<ul>
<li><a href="https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/">Form Associated Custom Elements</a></li>
<li><a href="https://webkit.org/blog/13851/declarative-shadow-dom/">Declarative Shadow DOM</a></li>
</ul>
<p>Also, Safari 16.4 beta comes with the <a href="https://github.com/whatwg/html/pull/6561">Imperative Slot API</a>
recently added to the <a href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element">HTML Living Standard</a>.
In practice this means a new <code>.assign()</code> method available on the <code><slot></code> element. The purpose of this
API is to make DOM composition and manipulating assigned nodes easier, especially in cases where the
<code>slot</code> attribute is not the best solution.</p>
<h3>Composed Selection</h3>
<p>One of the pain points of using Shadow DOM so far has been using <code>getSelection()</code>, which behaves
differently depending on the browser engine. In case of WebKit, strong encapsulation introduces
challenges for building rich text editors that work when placing inside a shadow root. It took quite
some time for our team to figure out a <a href="https://github.com/vaadin/quill/pull/2">workaround</a> that
worked reasonably well.</p>
<p>Based on recent discussions, it looks like there is finally an agreement around the shadow selection
API and a <a href="https://w3c.github.io/selection-api/#dom-selection-getcomposedrange">corresponding draft</a>
that comes with <code>getComposedRanges()</code> method being added to the <code>Selection</code> object prototype. And it
is already <a href="https://github.com/WebKit/WebKit/commit/e29577b1a051a4c2cbec70904df6e2f7cf8b5102">prototyped</a>
by the WebKit team! I'm excited to finally see this coming after more than four years since my own
<a href="https://github.com/webcomponents/polyfills/issues/66#issuecomment-427066346">research</a> on this topic.</p>
<h3>Interop 2023</h3>
<p>At this point, you might be wondering about such a notable progress around Web Components. While some
groundwork has been prepared over the past few years, there's actually a good reason. In case you
missed it, there's an ongoing project called <a href="https://github.com/orgs/web-platform-tests/projects/2">Interop 2023</a>
aiming to help developers build a better web by providing new APIs, polishing existing features and
fixing bugs.</p>
<p>Speaking about Web Components, the table linked above includes quite a few focus areas marked as
accepted. Check out <a href="https://github.com/web-platform-tests/interop/issues/231">Custom Elements</a> and
<a href="https://github.com/web-platform-tests/interop/issues/230">Shadow DOM</a> related tickets for more detail.
One notable exception is <a href="https://github.com/web-platform-tests/interop/issues/234">Customized Built'in Elements</a>
API, already added to the standard and covered with Web Platform tests, but lacking agreement
despite being <a href="https://github.com/WebKit/standards-positions/issues/97">actively discussed</a>.</p>
<h3>React and Custom Elements</h3>
<p>As some of you know, React has its own architectural decisions related to handling DOM. As a result,
it <a href="https://custom-elements-everywhere.com/#react">doesn't play well</a> with Custom Elements API, more
specifically custom events and passing non-primitive data. If you'd like to learn more, please check
out <a href="https://webcomponents.today/frameworks-recipes/">Frameworks Recipes</a>: these problems are quite well described by engineers
who have real world React experience.</p>
<p>In React 18, there is already an internal logic intended to partially address these issues. Up until
it was behind the flag without any ETA. But now there is a chance that this will actually land in a
future release, according to the <a href="https://github.com/facebook/react/issues/11347#issuecomment-1438789227">comment</a>
by Dan Abramov. This is huge for the Web Components community, and especially for companies using
both React and Web Components.</p>
<h3>Closing Words</h3>
<p>There are not so much to add on my behalf this month. Because of various personal reasons, I wasn't
able to spend enough time maintaining this project and adding new resources. However, by the end of
the month I managed to put together a few useful additions. In particular, the new <a href="https://webcomponents.today/api-design/">API Design</a>
section provides decent guides on advanced topics that might not be so obvious.</p>
<p>Same as before, I appreciate any feedback and suggestions regarding content, as well as any other ideas.
Your <a href="https://github.com/web-padawan/webcomponents.today/stargazers">stars</a> on GitHub are also welcome,
and any help with spreading the word about Web Components bookmarks keeps me motivated. One last thing:
the project is now using <a href="https://github.com/web-padawan/webcomponents.today/pull/36">Eleventy 2.0</a>
stable and it works like a charm. Feel free to fork and contribute!</p>
2023 January Update2023-01-31T00:00:00Zhttps://webcomponents.today/2023-01-update/<p>Today it's time for the first monthly update in 2023 — and it's been quite an eventful month for Web
Components! I'm excited to share with you some highlights from the community. A few of them got way
less attention than they deserved, that's why I decided to challenge myself with publishing regular
updates. So, let's see what new for Web Components in January 2023.</p>
<h3>Safari TP 162</h3>
<p>Yes, you got it right: Safari is the main news maker for Web Components this month! Meet the brand new
<a href="https://webkit.org/blog/13703/release-notes-for-safari-technology-preview-162/">Technology Preview 162</a>
with a bunch of improvements, including two notable features for Web Components: form associated Custom
Elements and declarative shadow DOM support. I mentioned both in the <a href="https://webcomponents.today/2022-review/">2022 Year in Review</a>
blog post, happy to see the progress!</p>
<p>Are you wondering what does this mean in practice? This <a href="https://codepen.io/calebdwilliams/pen/xxJjNgr">CodePen</a>
is quite a good demo of the new additions to the Custom Elements standard. By the way, its creator
<a href="https://twitter.com/calebwilliams12/status/1618693139996491778">Caleb Williams</a> also maintains a
polyfill for <code>ElementInternals</code> which you can find under <a href="https://webcomponents.today/polyfills-and-shims/">Polyfills</a>. And if
you are looking for an in-depth overview, check out also <a href="https://webcomponents.today/form-participation/">Form Participation</a>
and <a href="https://webcomponents.today/proposals/">Proposals</a>.</p>
<h3>Declarative Shadow DOM</h3>
<p>This proposal deserves its own mention, as there are even more good news. In addition to Chrome and Safari,
there is now an <a href="https://github.com/mozilla/standards-positions/issues/335#issuecomment-1404996929">update</a>
from Firefox team: the position has changed from "neutral" to "positive". While adding new features
to browsers takes time, there is still hope that Shadow DOM streaming and proper SSR might become a
reality sooner than later.</p>
<p>By the way, Elliott Marquez from the Lit team <a href="https://mstdn.social/@techytacos/109779899255671612">published</a>
a small example for testing declarative shadow DOM streaming, which at the time of writing is also
available in Chrome Canary (the new implementation didn't land in Chrome stable yet). The demo is
quite small, <a href="https://lit.dev/playground/#gist=d2540b636f7d9d420c2dd8ddd8436c81">check it out</a> if you
are interested to see the new attribute on the <code><template></code> element in action.</p>
<h3>Web Components Guide</h3>
<p>Launched just recently, this <a href="https://webcomponents.guide/">project</a> is already invaluable for anyone
who wants to learn writing Custom Elements from scratch, without a need for any libraries or tools.
The work done by <a href="https://github.com/keithamus">Keith Cirkel</a> is really impressive. The Web Components
community was definitely in need of such a detailed guide, and I was happy to update my own project
with add a bunch of links to it.</p>
<p>That said, this project is still in its early days, and I'm curious to observe how it evolves. Some
parts are marked as incomplete, which is a chance to contribute. I'd like to recommend a tutorial on
how to create a <a href="https://webcomponents.guide/tutorials/mastodon-toot-embed/">Mastodon Toot Embed</a> by
<a href="https://github.com/koddsson">Kristján Oddsson</a>: it's a very well written and clear guide. Creating
such learning content for beginners is often harder than it seems.</p>
<h3>HTML With Superpowers</h3>
<p>Speaking of learning content for Web Components, here's another resource worth checking out:
<a href="https://htmlwithsuperpowers.netlify.app/">HTML With Superpowers</a>. This website is a guidebook for
the <a href="https://twitter.com/FrontendMasters">Frontend Masters</a> course about Web Components, open sourced
by its creator <a href="https://twitter.com/davatron5000/status/1611070142670331906">Dave Rupert</a> on January 5.
While I haven't had a chance to take that course yet, the level of detail makes me feel like it's
a good idea.</p>
<p>The section I like the most is Frequently Asked Questions: in my opinion, Web Components were lacking
this before. Especially, the <a href="https://htmlwithsuperpowers.netlify.app/faq/accessibility.html">Accessibility</a>
part is great: first it briefly outlines the problem and then points to further reading. However, I'm
a bit biased due to the fact that <a href="https://htmlwithsuperpowers.netlify.app/faq/routing.html">Routing</a>
section that recommends <a href="https://github.com/vaadin/router">Vaadin Router</a>: it is a project that I
used to work on in the past :)</p>
<h3>Shoelace 2.0 Stable</h3>
<p>Have you heard about <a href="https://shoelace.style/">Shoelace</a>? It's a great library of Web Components built
by Cory LaViska. While it's not the only example of a successful one-man show, Shoelace is unique:
even React developers <a href="https://css-tricks.com/shoelace-component-frameowrk-introduction/">like it</a>,
and that's a bit unusual for Web Components, isn't it? Furthermore, last year we heard some huge news:
Shoelace and Cory LaViska <a href="https://blog.fontawesome.com/shoelace-joins-font-awesome/">joined Font Awesome</a>.</p>
<p>One thing that was special about Shoelace due to the past two years was its infinite beta stage. If
you remember Babel 7, then you probably understand what I'm talking about — except that Shoelace had
88 (!) beta releases. Now it is finally <a href="https://blog.fontawesome.com/shoelace-2-0-is-official/">stable</a> —
and from an outsider's perspective, it's been quite a journey. If you don't trust me, check out the
<a href="https://github.com/shoelace-style/shoelace/compare/v2.0.0-beta.1..v2.0.0">Git diff</a> since the first beta.</p>
<h3>New Bookmarks Additions</h3>
<p>After all the awesome news above, I'd like to also share some of my personal highlights. After a short
holidays break I continued to work on Web Components bookmarks. Notable changes that landed this month
include <a href="https://github.com/web-padawan/webcomponents.today/pull/12">navigation improvements</a> and
the <a href="https://github.com/web-padawan/webcomponents.today/pull/30">Home page redesign</a>. To be honest,
design skills aren't among my strengths, but I always try to do my best.</p>
<p>On top of that, I published two new categories: the <a href="https://webcomponents.today/beginners-guide/">Beginner's Guide</a> with a bunch of
articles for newcomers, and the collection of <a href="https://webcomponents.today/testing-helpers/">Testing Helpers</a> with some utilities
that make testing Shadow DOM easier among other things. Overall, there were 32 new additions to this
website in January, including Standalone Elements, Frameworks Recipes, Talks and Recordings, and more.</p>
<h3>Closing Words</h3>
<p>That's a wrap for Web Components in January 2023. It's been a great start of the year, and of course
we can't be sure that the next update will be equally awesome. Nevertheless, I really hope that we'll
still have some good news around this topic in the upcoming months. If you are working on something
that might deserve a mention next time, let's get in touch.</p>
<p>Thank you for reading! I hope you like the idea of this project and the monthly update. If so, please
<a href="https://github.com/web-padawan/webcomponents.today/stargazers">give it a star</a> on GitHub. Also,
contributions are always welcome and super simple: after all, this is just a static website built with
<a href="https://github.com/web-padawan/webcomponents.today/pull/23">Eleventy 2.0 beta</a>). My goal is to make
it a great place for anyone passionate about Web Components, so improvement ideas are appreciated.</p>
2022 in Review2022-12-31T00:00:00Zhttps://webcomponents.today/2022-review/<p>Today marks one month since this project's launch! I'm incredibly proud to be able to share it with
you. Despite the russian missile strikes, including the one on New Year's Eve, during the major power
outages and rolling blackouts in my city, I managed to keep this website updated since December 1 up
until the Christmas day. The <a href="https://fosstodon.org/tags/WebComponentsAdvent">#WebComponentsAdvent</a>
turned out to be quite a challenge though.</p>
<p>After taking a short break, I'm fully committed to moving this project forward next year. Stay tuned
for regular updates with new awesome content, as I already have quite a few items on my backlog! I'm
also planning to publish blog posts on a monthly basis. And in the meantime, check out a brief recap
of notable Web Components improvements and fixes that landed in the browsers this year.</p>
<ul>
<li><a href="https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/96"><strong>Firefox 96</strong></a> landed on January 11
added the WebDriver:GetElementShadowRoot command to retrieve the shadow root (open or closed) hosted
by a given element.</li>
<li><a href="https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/101"><strong>Firefox 101</strong></a> released on May 31
enabled support for constructable stylesheets. After long discussions on the API shape, this proposal
finally reached the consensus.</li>
<li><strong>WebKit</strong> added support for ElementInternals interface — a great <a href="https://github.com/WebKit/WebKit/pull/2690">contribution</a>
by Alexey Shvayka. This API is a foundation for a few <a href="https://webcomponents.today/proposals-and-drafts/">features</a>, including
form associated Custom Elements.</li>
<li><strong>WebKit</strong> fixed a bunch of issues related to CSS selectors like <code>:host()</code>, <code>:focus</code>, <code>:focus-within</code>,
and <code>:lang</code> when used with Shadow DOM in <a href="https://webkit.org/blog/13066/release-notes-for-safari-technology-preview-150/">Safari TP 150</a>.</li>
<li><strong>WebKit</strong> added support for “Get Element Shadow Root”, “Find Element From Shadow Root”, and “Find
Elements From Shadow Root” commands in <a href="https://webkit.org/blog/13093/release-notes-for-safari-technology-preview-151/">Safari TP 151</a>.</li>
<li><strong>WebKit</strong> updated Shadow DOM focusing to the latest spec, including some improvements to <code>delegatesFocus</code>
mechanism. Related <a href="https://github.com/WebKit/WebKit/pull/2828">change</a> also landed in Safari TP 151.</li>
<li><strong>WebKit</strong> engineer Ryosuke Niwa <a href="https://github.com/WebKit/WebKit/pull/4693">prototyped</a> support
for declarative Shadow DOM. This resulted in a new discussion and some updates to the proposal by
Mason Freed from Google.</li>
<li><strong>WebKit</strong> implemented <a href="https://github.com/WebKit/WebKit/pull/4452">ARIA id-ref reflection for ElementInternals</a>.
This change in <a href="https://webkit.org/blog/13394/release-notes-for-safari-technology-preview-156/">Safari TP 156</a>
is an important part of the Accessibility Object Model (AOM) proposal.</li>
<li><strong>WebKit</strong> <a href="https://github.com/WebKit/WebKit/pull/4903">enabled</a> support for constructable stylesheet
objects, including <code>adoptedStyleSheets</code>. This was a yet another Web Components improvement that landed
in Safari TP 156.</li>
<li><strong>Chrome</strong> published <a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/Ovz-6Dte-qA/m/ABaUFnt3CQAJ">intent to prototype</a>
streaming declarative shadow DOM. This will introduce differences compared to the original implementation
added in Chrome 90.</li>
<li><strong>WebKit</strong> fixed a <a href="https://bugs.webkit.org/show_bug.cgi?id=247134">bug</a> preventing Shadow DOM content from being exposed to accessibility clients when used in an aria-modal or dialog. This fix was released in <a href="https://webkit.org/blog/13639/release-notes-for-safari-technology-preview-160/">Safari TP 160</a>.</li>
<li><strong>WebKit</strong> has a <a href="https://github.com/WebKit/WebKit/pull/4988">PR by Alexey Shvayka</a> to implement
form associated Custom Elements currently in review. This feature might land in Safari Technology
Preview early next year.</li>
<li><strong>WebKit</strong> also has a <a href="https://github.com/WebKit/WebKit/pull/7798">PR by Ryosuke Niwa</a> to enable
declarative shadow DOM by default. At the time of writing this PR is also in review, hopefully it
will be merged soon.</li>
<li><strong>Firefox</strong> expressed interest in declarative Shadow DOM proposal too. Henri Sivonen from the Gecko
team <a href="https://github.com/whatwg/html/pull/5465">commented</a> about some plans to take a closer look
after the holidays.</li>
</ul>
<p>That's a wrap for Web Components in 2022 — and in my opinion, it has been quite a productive year for
browser vendors and standards advancement. I'm really excited about the progress on declarative shadow
DOM, and constructable stylesheets getting close to stable. In my opinion, both specs are very valuable
additions to the set of Web Components standards.</p>
<p>Finally, I want to say thank you to everyone who helped to spread the word about this project and to
boost my posts on Mastodon and Twitter. Staying focused and getting this website done became my own
recipe to relieve anxiety and stress from the russian war against my country. Happy New Year to everyone
in Ukraine and to all our supporters! Please <a href="https://stand-with-ukraine.pp.ua/">stand with Ukraine</a> in 2023.</p>
Introduction2022-11-30T00:00:00Zhttps://webcomponents.today/intro/<p>Welcome to <strong>Web Components bookmarks</strong> — the curated collection of up-to-date Web Components guides
and resources! I'm excited to finally share this project publicly, with lots of content to be added
every day in the upcoming weeks, so stay tuned. In the end of December, I'll make it open source.</p>
<p>At the time of writing this project is still in development. You can track the progress at Mastodon
by following the <a href="https://fosstodon.org/tags/WebComponentsAdvent">#WebComponentsAdvent</a> hashtag. And
by the way, boosts are highly welcome! Feel free to also follow me on <a href="https://twitter.com/serhiikulykov">Twitter</a>
if you are into that kind of thing, as I'll post there too, for more visibility.</p>
<p>When I started to learn Web Components in early 2016, there was no such website. The initial wave of
hype that began in 2013 has passed, and Web Components were undergoing quite a deep trough of
disillusionment. As a result of moving from the Chrome-only V0 specs to Custom Elements and Shadow DOM
V1 with some <a href="https://hayatoito.github.io/2016/shadowdomv1/">significant API changes</a>, numerous
previously posted articles became obsolete.</p>
<p>For example, the <a href="https://github.com/mateusortiz/webcomponents-the-right-way">Web Components the Right Way</a>
"awesome list" created by Mateus Ortiz was largely outdated. I wanted to contribute and submitted a
few <a href="https://github.com/mateusortiz/webcomponents-the-right-way/pull/12">PRs</a> to align it with the
rapidly evolving standards. Two years later, I became a <a href="https://dev.to/webpadawan/web-components-the-right-way-project-relaunch-20d7">maintainer</a>
of this project, and I tried to do my best to keep it in a good shape while adding more content.
But the problem is, not everyone likes these longs READMEs.</p>
<p>Today it's clear that Web Components are here to stay. In my opinion, they finally reached the plateau
of productivity. Front-end developers use them more often (although not as much as JS frameworks like
React and Vue). But there are still some notable gaps to fill concerning the ecosystem.</p>
<p>There are ongoing efforts related to Web Components. In particular, there is active development by
the <a href="https://github.com/webcomponents/webcomponents.org/issues/1250#issuecomment-1256401265">Lit team</a>
on rebuilding the <a href="https://www.webcomponents.org/">webcomponents.org</a> project. Also, since the last year,
we've seen a lot of activity from the <a href="https://web-components-cg.netlify.app/">Web Components Community Group at W3C</a>.
But in this case, more is better.</p>
<p>This project is really simple: it's just a static website with hundreds of links to other resources
that I carefully selected, grouped by topics. Most of the articles are from 2019 or newer: by then,
Web Components APIs landed in all modern browsers. However, one thing that I especially enjoy
about web standards is that even some <a href="https://web.dev/web-components/">examples from 2017</a> are still
relevant and worth checking out.</p>
<p>While I've been working on this single-handedly, I would like to say thank you to everyone who has
been advocating for Web Components over the last couple of years. Your great tutorials, guides, and
tools have helped me so much! This collection wouldn't be possible without your work. And I will
dedicate the final day of this advent series to celebrating all the folks within the community.</p>
<p>One last thing: let me also introduce myself. I'm Serhii Kulykov, a software engineer from Ukraine.
As you might have heard, there is an ongoing war and the russian invasion of my country. And I'm writing
these words just one week after the huge blackout caused by russian missile strikes, so this project
may encounter challenges. If you want to support my work, please <a href="https://stand-with-ukraine.pp.ua/">support Ukraine</a> instead.</p>
<p>If you have any feedback or ideas on how to improve this project, let's get in touch! My hope is that
this website will help anyone interested in Web Components enjoy working with them as much as I do.</p>