#Development #Explorations
Isomorphic web components · Who says web components can’t be rendered server-side? https://ilo.im/161cdx

_____
#WebComponents #WebPlatform #WebDev #Frontend #LightDOM #ShadowDOM #HTML #JavaScript #Backend #Server

#Development #Techniques
Combining light DOM and shadow DOM · How to mix-and-match both in a web component https://ilo.im/160yn2

_____
#WebComponents #LightDom #ShadowDom #Frontend #HTML #CSS #JavaScript

🟣 Combining light DOM and shadow DOM in a Web Component

by @cferdinandi.bsky.social

#lightDOM #shadowDOM #WebComponent #webdev

https://gomakethings.com/combining-light-dom-and-shadow-dom-in-a-web-component/

#Development #Techniques
HTML web component with shadow DOM · Sometimes, a little shadow DOM can be a treat https://ilo.im/15zpwi

_____
#HtmlWebComponent #WebComponent #LightDOM #ShadowDOM #ProgressiveEnhancement #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Approaches
Web components without jumping from 0 to 100 · How you can start small with custom HTML elements https://ilo.im/15z83x

_____
#WebComponent #ShadowDOM #LightDOM #ProgressiveEnhancement #Browser #WebDev #Frontend #HTML #JavaScript

#Development #Clarifications
Shadow DOM and the problem of encapsulation · Shadow DOM’s accomplishment in web components https://ilo.im/15xjkz

_____
#WebComponent #ShadowDOM #LightDOM #WebDev #Frontend #HTML #JavaScript

#Development #Techniques
Shadow DOM is for hiding your shame · Light DOM is for the ideal, perfect structure. https://ilo.im/15i68u

_____
#WebComponent #ShadowDOM #LightDOM #HtmlWebComponent #WebDev #Frontend #HTML #JavaScript

#Development #Techniques
Web Components · Custom HTML elements with lifecycle and state control https://ilo.im/15xfu5

_____
#WebDev #WebComponent #HtmlWebComponent #LightDOM #ShadowDOM #ProgressiveEnhancement #Frontend #HTML #JavaScript #Accessibility

"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."

https://www.htmhell.dev/adventcalendar/2023/6/

Very straightforward #WebComponents example by @cferdinandi by showing how to create the (classic?) counter button.

#HTML #JavaScript #WebDev #Frontend #ShadowDOM #LightDOM

🌤️ Head Toward the Light DOM

Recently, 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 @macdonst

#webcomponents #lightdom

https://begin.com/blog/posts/2023-11-10-head-toward-the-light-dom

`aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of #accessibility being unaccessible to the dev like me. Only do you get a conflict in IDs for #ARIA and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS #selectors 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 #ShadowDOM over #LightDOM? Are #CustomElements getting more compatible with #a11y things with months to come? I wanna employ #WebComponents in #Kbin fork, but I need a strong reasoning for this.

@kulykov I finalized boilerplate in base class. Type hints are asinine, albeit logic for slot update takes into account:
+ addedNodes (additions to the #LightDOM),
+ removedNodes (nodes previously assigned to slots now trigger callback for each of the same slots to handle fallback),
+ target (text changes within those nodes).

Was stuck doing UserCard component. It can now accept user's name and email via slots, and update name initials in the inner Avatar based on slot text.