101010.pl

Dave Copeland :ruby:<a href="https://ruby.social/tags/TIL" class="mention hashtag" rel="nofollow noopener" target="_blank">#TIL</a>, (and I cannot find documented), but can easily replicate is that when a <a href="https://ruby.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://ruby.social/tags/CustomElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomElement</a>'s `connectedCallback()` is called, `innerHTML` is undefined, UNLESS, you wait to define your custom element after DOMContentLoaded.I wish there was a callback for a custom element that amounted to “the element has been loaded", but I can see that this doesn't necessarily make sense.[Can't recreate in codepen since it runs all stuff after DOM loaded.]<a href="https://gist.github.com/davetron5000/255ff81851c18a220fa73b329cd8ed4d" rel="nofollow noopener" translate="no" target="_blank">https://gist.github.com/davetron5000/255ff81851c18a220fa73b329cd8ed4d</a>

Adrian RoselliRemember that time I made a perfect YouTube and Vimeo web component that is progressively enhanced and accessible and nobody said anything about it proving that it is indeed perfect?That was cool.<a href="https://adrianroselli.com/2024/06/youtube-and-vimeo-web-component.html" rel="nofollow noopener" translate="no" target="_blank">https://adrianroselli.com/2024/06/youtube-and-vimeo-web-component.html</a><a href="https://toot.cafe/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> <a href="https://toot.cafe/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#accessibility</a> <a href="https://toot.cafe/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://toot.cafe/tags/CustomElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomElement</a>

westbrookThrough the conversation, I wondered whether the misunderstanding that a <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElement</a> directly correlates to a <a href="https://mastodon.social/tags/frameworkComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#frameworkComponent</a> was eased or expanded with the theoretical advent of an HTML Module. Much of what we were seeing as <a href="https://mastodon.social/tags/htmlModules" class="mention hashtag" rel="nofollow noopener" target="_blank">#htmlModules</a> seemed more directly related to what we see in <a href="https://mastodon.social/tags/frameworkComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#frameworkComponents</a>, which seems like an interesting path to investigate.With <a href="https://mastodon.social/tags/domPart" class="mention hashtag" rel="nofollow noopener" target="_blank">#domPart</a> and HTML Modules, it it possible to recreate what we know now as a <a href="https://mastodon.social/tags/JSFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSFramework</a> in just HTML!?! 🤯

westbrook<a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener" target="_blank">@eleventy</a> That's a hot little <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElement</a>! And so useful/informative, too.Exciting 🥳

Renoir Boulanger<a href="https://mastodon.social/@leben" class="u-url mention" rel="nofollow noopener" target="_blank">@leben</a>I'm unsure why I have to make the CSS files to bleed both sides (shadowDom, and calling page), I'll learn about that eventually.Also, its script[type=module] import. Different from past years. Exciting times!Refer to source served from here: <a href="https://renoirb.com/esm-modules/app-layout-element.mjs" rel="nofollow noopener" target="_blank">https://renoirb.com/esm-modules/app-layout-element.mjs</a>I'm working on a fork of <a href="https://mastodon.social/@traceypooh" class="u-url mention" rel="nofollow noopener" target="_blank">@traceypooh</a> 's blogtini but using <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElement</a> and separating concerns. It's broken, in progress. Hope that helps you./cc <a href="https://front-end.social/@heydon" class="u-url mention" rel="nofollow noopener" target="_blank">@heydon</a>

Renoir BoulangerHi <a href="https://mastodon.social/@leben" class="u-url mention" rel="nofollow noopener" target="_blank">@leben</a>Hi, sorry for interjecting.I've been experimenting with bleeding StyleSheets for another purpose last week. In my case, separate the "chrome" (common layout of pages) into a <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElement</a> [1] <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a>, here is an usage example [2] look "view source", it's kinda neat!Hope this helps.1: <a href="https://renoirb.com/esm-modules/app-layout-element.mjs" rel="nofollow noopener" target="_blank">https://renoirb.com/esm-modules/app-layout-element.mjs</a> 2: <a href="https://renoirb.github.io/blogtini/using-app-layout.html" rel="nofollow noopener" target="_blank">https://renoirb.github.io/blogtini/using-app-layout.html</a>/cc <a href="https://front-end.social/@heydon" class="u-url mention" rel="nofollow noopener" target="_blank">@heydon</a>

westbrook<a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> <a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@mia</a> <a href="https://front-end.social/@Una" class="u-url mention" rel="nofollow noopener" target="_blank">@Una</a> Blog post scale; short version: <a href="https://mastodon.social/tags/SpectrumWebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#SpectrumWebComponents</a> themes the system over single components, hoping to ship the smallest amount of JS for an app w/ many components, but it buys you into the system. Focusing on a the <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElement</a>, off loading CSS strings for Adopted Stylesheets to CSS files w/ Import Assertions means more styles can live w/ the components, while maintaining similar complexity & helping prioritize single component usage, allowing to serve more user types.

westbrook<a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@mia</a> It is very possible that Container Style Queries are the CSS feature that I've been most excited about the last number of year, and it is super cool to see more examples come together leveraging them and nudging browsers tiny little steps closer to shipping! 🤩 Thanks for pushing this so hard for the rest of us. 🙏 Binding this with Import Assertions for CSS is gonna take <a href="https://mastodon.social/tags/developingDesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#developingDesignSystem</a> with <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElement</a> and <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> to a whole new level. 🔥

Recent searches

Search options

Administered by:

Server stats:

#customelement