Shakedown Social

westbrookIn that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</a>Catch up on some techniques for managing connection time work in a custom element. 😁 There's even reasons for using shadow DOM hidden in there. 😱Thanks @nachtfunke for starting the convo on this and <a href="https://mastodon.social/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@zachleat</a> for challenging a toot into a full on blog dump. 🙇 <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/moveBefore" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#moveBefore</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a>

westbrook<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@zachleat</a> <a href="https://indieweb.social/@nachtfunke" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@nachtfunke</a> I'm not saying this is because I didn't get you anything for your birthday, but I'm also not saying it isn't because of that...<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</a><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponentsCG</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a>

GENKI<a href="https://social.vivaldi.net/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> な Custom Elements である以上、属性値では基本 String しか渡せないはずなので> Riot.js passes all primitive data (strings, numbers, booleans) to Custom Elements as attributesこれは Custom Elements としてはちょっと解せないんだよな… 今手元で試しても props は全部 strings になっちゃうし。ただ、> It passes complex data (Objects, Arrays) to Custom Elements as properties.これについては、たとえば親コンポーネントの中で``` this.root.shadow.querySelector('子コンポーネント要素').プロパティ名 ```という風にすると、親から子の中のプロパティに Object とか Array を渡すことができた。<a href="https://social.vivaldi.net/tags/RiotJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RiotJS</a> <a href="https://social.vivaldi.net/tags/WebCompoents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebCompoents</a> <a href="https://social.vivaldi.net/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Using <a href="https://mastodon.social/tags/DeclarativeShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DeclarativeShadowDOM</a> to render placeholder content that gets replaced later as the <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/streams" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#streams</a> in with no <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>!<a href="https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/</a>This is an interesting technique, but it has limitations in that you can't close the <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElement</a> until you've loaded the content.<a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/shadowDom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDom</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/http" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#http</a> <a href="https://mastodon.social/tags/streaming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#streaming</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Nathan KnowlerA simple smoke test for your custom elements.<a href="https://knowler.dev/blog/a-custom-element-smoke-test" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://knowler.dev/blog/a-custom-element-smoke-test</a><a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://sunny.garden/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> <a href="https://sunny.garden/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸I'd like to spend some more time with <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a>, <a href="https://mastodon.social/tags/ServiceWorkers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ServiceWorkers</a>, <a href="https://mastodon.social/tags/WebSockets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSockets</a>, <a href="https://mastodon.social/tags/OffscreenCanvas" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OffscreenCanvas</a>, <a href="https://mastodon.social/tags/WebWorkers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebWorkers</a>, <a href="https://mastodon.social/tags/WebGPU" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebGPU</a>, <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a>, and the <a href="https://mastodon.social/tags/GamePad" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GamePad</a> <a href="https://mastodon.social/tags/API" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#API</a>. I've been noodling for a long time about how you could build a game using <a href="https://mastodon.social/tags/ESModules" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ESModules</a>, and <a href="https://mastodon.social/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> to allow players to author their own components to extend the game. I guess I'm just more interested in how the game works mechanically than how it looks.

Matthew PhillipsProof-of-concept for a HTML-driven state container idea: <a href="https://codepen.io/matthewp/pen/BabKPoe?editors=1010" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/matthewp/pen/BabKPoe?editors=1010</a>Want to play around with more non-UI, logical web component ideas. <a href="https://c.im/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://c.im/tags/htmlwebcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmlwebcomponents</a> <a href="https://c.im/tags/customelements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customelements</a>

Brian LeRoux 💚"there is no use case for extending built-in elements" aside form elements, picture element, table element, list element, video element, others I'm probably missingand no, element internals isn't the solution. it requires boatloads of client javascript to replicate built-in behaviour which is exactly the problem we're trying to avoid these days. <a href="https://indieweb.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://indieweb.social/tags/customelements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customelements</a> <a href="https://indieweb.social/tags/webstandards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webstandards</a> <a href="https://indieweb.social/tags/webkit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webkit</a>

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Like what if there was a library of <a href="https://mas.to/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> for building <a href="https://mas.to/tags/videoGames" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#videoGames</a>? What if you built <a href="https://mas.to/tags/Mario" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mario</a> like<mario-game> <mario-controls> <mario-button button=a action=jump> <mario-level> <mario-block has=mushroom> <mario-pipe>You could build new levels with nothing but <a href="https://mas.to/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a><a href="https://mas.to/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a>

Serhii Kulykov📢 <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> in 2023: February update.- <a href="https://fosstodon.org/tags/Safari" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Safari</a> 16.4 beta release new features - <a href="https://fosstodon.org/tags/Interop2023" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Interop2023</a> for Web Components - <a href="https://fosstodon.org/tags/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#React</a> and <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> news<a href="https://webcomponents.today/2023-02-update/" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today/2023-02-update/</a>

Serhii Kulykov📢 <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> bookmarks update: <a href="https://fosstodon.org/tags/API" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#API</a> <a href="https://fosstodon.org/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a>. If you're already familiar with basics, do check it out. You'll find some useful tips and things to consider.<a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://webcomponents.today/api-design/" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today/api-design/</a>

Serhii Kulykov📢 Web Components bookmarks project finally got a proper Home page! 🎉 - Projects about Web Components that I recommend, - Other <a href="https://fosstodon.org/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> projects I'm proud to be part of.Check it out and please <a href="https://fosstodon.org/tags/boost" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#boost</a> to spread the word if you like the project! My goal is to make it an ultimate knowledge base about <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a>, <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> and other <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> standards.<a href="https://webcomponents.today" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today</a>

Serhii KulykovUpgraded <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> bookmarks to <a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@eleventy</a> 2.0 beta and it went super smooth! Excited about the package-lock.json getting smaller as a result.Also, added the <a href="https://fosstodon.org/tags/rss" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#rss</a> feed - subscribe for monthly updates on <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a>, <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> and other related news (there's now a link in the footer):<a href="https://webcomponents.today" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today</a>

Serhii Kulykov<a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> bookmarks got a new category: Testing Helpers! Here you can find a few useful libraries that make <a href="https://fosstodon.org/tags/testing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#testing</a> <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> and <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> easy:<a href="https://webcomponents.today/testing-helpers/" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today/testing-helpers/</a>

Serhii KulykovDid you know that <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> and <a href="https://fosstodon.org/tags/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#React</a> can be used together? There are several <a href="https://fosstodon.org/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> libraries for it, these two look interesting:- React Shadow: use <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> with React easily; - Remount: use React components as <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a>.Check out the <a href="https://fosstodon.org/tags/frameworks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frameworks</a> recipes page for more:<a href="https://webcomponents.today/frameworks-recipes/" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today/frameworks-recipes/</a>

Serhii Kulykov📢 <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> bookmarks now have a Beginner's Guide section! This is a good starting point for learning how to create <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a>.Thanks to <a href="https://indieweb.social/@keithamus" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@keithamus</a>, <a href="https://mastodon.world/@calebwilliams" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@calebwilliams</a>, <a href="https://mastodon.social/@passle" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@passle</a> and <a href="https://fosstodon.org/@alangdm" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@alangdm</a> for great articles on this topic!<a href="https://webcomponents.today/beginners-guide/" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today/beginners-guide/</a>

Serhii KulykovForm-associated <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> has been implemented in <a href="https://fosstodon.org/tags/WebKit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebKit</a> and enabled by default:<a href="https://github.com/WebKit/WebKit/commit/1e814e21299b575547f683ac5e6872e3d2702dc1" rel="nofollow noopener noreferrer" target="_blank">https://github.com/WebKit/WebKit/commit/1e814e21299b575547f683ac5e6872e3d2702dc1</a>

Serhii KulykovToday's additions to <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> bookmarks:- <code-block> - <esri-map-view> - <mapml-viewer> - SvelecteCheck out the growing list of standalone <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a>:<a href="https://webcomponents.today/standalone-elements/" rel="nofollow noopener noreferrer" target="_blank">https://webcomponents.today/standalone-elements/</a>

Serhii Kulykov<a href="https://fosstodon.org/tags/WebKit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebKit</a>: Alexey Shvaika submitted a PR to add support for form associated <a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a>. This change is currently in review, hopefully it will land in one of the next <a href="https://fosstodon.org/tags/Safari" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Safari</a> Technology Preview releases.<a href="https://github.com/WebKit/WebKit/pull/4988" rel="nofollow noopener noreferrer" target="_blank">https://github.com/WebKit/WebKit/pull/4988</a>

Serhii Kulykov<a href="https://fosstodon.org/tags/WebKit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebKit</a>: added support for ElementInternals interface - a great contribution by Alexey Shvayka. This API is a foundation for a few features, including form associated Custom Elements (more on that later).<a href="https://fosstodon.org/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://github.com/WebKit/WebKit/pull/2690" rel="nofollow noopener noreferrer" target="_blank">https://github.com/WebKit/WebKit/pull/2690</a>

Recent searches

Search options

Administered by:

Server stats:

#customelements