Inautilo#Development #Guides
Easier than expected · Testing HTML light DOM web components https://ilo.im/168ims
_____
#Testing #HtmlWebComponents #WebComponents #LightDOM #ShadowDOM #Accessibility #WebDev #Frontend #HTML #JavaScript
#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
For the last few weeks, I’ve been complaining about the shadow DOM. As much as I think it’s an anti-pattern, there are some times where the shadow DOM can be situationally useful. Today, I wanted to show you how you can mix-and-match the light DOM and the shadow DOM in a single Web Component. Let’s dig in! Our Web Component Let’s imagine we have a <count-up> custom element… <count-up></count-up> When our Web Component JavaScript instantiates, it renders into a <button>, and a [role="status"] element that displays how many times the <button> has been clicked…
pablolarah🟣 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/
Combining light DOM and shadow DOM in a Web Component
For the last few weeks, I’ve been complaining about the shadow DOM. As much as I think it’s an anti-pattern, there are some times where the shadow DOM can be situationally useful. Today, I wanted to show you how you can mix-and-match the light DOM and the shadow DOM in a single Web Component. Let’s dig in! Our Web Component Let’s imagine we have a <count-up> custom element… <count-up></count-up> When our Web Component JavaScript instantiates, it renders into a <button>, and a [role="status"] element that displays how many times the <button> has been clicked…
#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
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."
https://www.htmhell.dev/adventcalendar/2023/6/
Very straightforward #WebComponents example by @cferdinandi by showing how to create the (classic?) counter button.
