Mathstodon

0 posts0 participants0 posts today

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Explorations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Explorations</a> Isomorphic web components · Who says web components can’t be rendered server-side? <a href="https://ilo.im/161cdx" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/161cdx</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/WebPlatform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebPlatform</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/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/LightDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LightDOM</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/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/Backend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Backend</a> <a href="https://mastodon.social/tags/Server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Server</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Techniques</a> Combining light DOM and shadow DOM · How to mix-and-match both in a web component <a href="https://ilo.im/160yn2" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/160yn2</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/LightDom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LightDom</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/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Techniques</a> HTML web component with shadow DOM · Sometimes, a little shadow DOM can be a treat <a href="https://ilo.im/15zpwi" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/15zpwi</a>_____ <a href="https://mastodon.social/tags/HtmlWebComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HtmlWebComponent</a> <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponent</a> <a href="https://mastodon.social/tags/LightDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LightDOM</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/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProgressiveEnhancement</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/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Approaches</a> Web components without jumping from 0 to 100 · How you can start small with custom HTML elements <a href="https://ilo.im/15z83x" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/15z83x</a>_____ <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponent</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/LightDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LightDOM</a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProgressiveEnhancement</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</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/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Steve Frenzel"With a traditional HTML component, any developer who uses it will need to update their HTML, JavaScript, and CSS files to include the fix. With web components, they only have to update the JavaScript file."<a href="https://www.htmhell.dev/adventcalendar/2023/6/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.htmhell.dev/adventcalendar/2023/6/</a>Very straightforward <a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> example by <a href="https://mastodon.social/@cferdinandi" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@cferdinandi</a> by showing how to create the (classic?) counter button.<a href="https://mastodon.online/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.online/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.online/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.online/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.online/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://mastodon.online/tags/LightDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LightDOM</a>

enhance🌤️ Head Toward the Light DOMRecently, there has been a spate of articles that talk about using the Light DOM in Web Components. Everyone knows we are extremely pro-Light DOM web components. Today, we are announcing some new client-side Light DOM functionality.by <a href="https://mastodon.online/@macdonst" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@macdonst</a> <a href="https://fosstodon.org/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://fosstodon.org/tags/lightdom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lightdom</a> <a href="https://begin.com/blog/posts/2023-11-10-head-toward-the-light-dom" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://begin.com/blog/posts/2023-11-10-head-toward-the-light-dom</a>

Vint Prox`aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of <a href="https://techhub.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> being unaccessible to the dev like me. Only do you get a conflict in IDs for <a href="https://techhub.social/tags/ARIA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ARIA</a> and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS <a href="https://techhub.social/tags/selectors" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#selectors</a> to actually make sense? I cannot willingly drag my hand and implant unique IDs on a whim: first thing, I have to come up with really witty names, another - mangle the markup of reusable component... wait.Now that I think about it, maybe that's one superior use for <a href="https://techhub.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> over <a href="https://techhub.social/tags/LightDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LightDOM</a>? Are <a href="https://techhub.social/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomElements</a> getting more compatible with <a href="https://techhub.social/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> things with months to come? I wanna employ <a href="https://techhub.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> in <a href="https://techhub.social/tags/Kbin" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kbin</a> fork, but I need a strong reasoning for this.

Recent searches

Search options

Administered by:

Server stats:

#lightdom