Starting to play around with Lit for a custom element project I’ve started, but I don’t think I can handle going back to class components after having experienced React hooks. The ability to extract complex behaviors into reusable hooks is just too useful. I would rather avoid class-based code where possible. #lithtml #customelements #WebComponents
#webcomponents #customelements #lithtml
I wish there’s a way to assign text node to named slots. Right now you have to use the "default” slot to do so, e.g.
```
<my-comp>
<template shadowrootmode="open”>
<slot></slot>
</template>
</my-comp>
<my-comp>Some text</my-comp>
```
But sometimes I need to assign different pieces of text to different slots and they don't necessarily need any semantics. Using `<div slot=“foo” role="none”>text</div>` doesn't feel right. Using attributes isn’t always clean either. #CustomElements
Follow Me! #introduction
#oregon #pdx #pnw #portland #sanFrancisco #sf #arkansas #cannabis #coffee #cycling #bike #eBike #fungi #mushrooms #unreal #videoGames #gaming #vr #retroGaming #rg35xx #sega #web #css #developer #frontEnd #fullStack #html #javaScript #js #webApps #webDev #aws #customElements #cypress #devops #graphql #lit #pwa #react #reactjs #serverless #shadowDom #webComponents #web3 #activityPub #bitcoin #blockchain #btc #crypto #cryptocurrency #filecoin #helium #hnt #icp #ipfs
#ipfs #icp #HNT #helium #filecoin #cryptocurrency #crypto #btc #blockchain #bitcoin #ActivityPub #Web3 #webcomponents #shadowdom #serverless #reactjs #react #pwa #lit #graphql #devops #cypress #customelements #aws #webdev #webapps #js #javascript #html #fullstack #frontend #developer #css #web #sega #rg35xx #retrogaming #vr #gaming #videogames #unreal #mushrooms #fungi #ebike #bike #cycling #coffee #cannabis #arkansas #sf #sanfrancisco #portland #pnw #pdx #oregon #introduction
Like what if there was a library of #webComponents for building #videoGames?
What if you built #Mario 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 #HTML
#customelements #html #mario #videogames #webcomponents
📢 #WebComponents in 2023: February update.
- #Safari 16.4 beta release new features
- #Interop2023 for Web Components
- #React and #CustomElements news
#webcomponents #safari #interop2023 #react #customelements
If you think the #HTML templating worth improvement, please take your vote or opinion on #wicg proposal
#webcomponents #customelements
https://discourse.wicg.io/t/proposal-fully-functional-declarative-template/6115
#html #WICG #webcomponents #customelements
📢 #WebComponents bookmarks update: #API #design.
If you're already familiar with basics, do check it out.
You'll find some useful tips and things to consider.
#webcomponents #api #design #customelements #shadowdom
#mermaid #diagrams, but authored with #html #customElements #webComponents #webDev #markdown
#markdown #webdev #webcomponents #customelements #html #diagrams #mermaid
If you want to learn how to write native custom elements, no framework, I wrote a thing. A pretty excellent thing.
https://web.dev/learn/html/template/
#customElements #vanillaJS #WebComponents #learnToCode #shadowDOM #shadowRoot #HTML #CSS
#customelements #vanillajs #webcomponents #learntocode #shadowdom #shadowroot #html #css
What else is missing from shadow DOM / custom elements API? Accessibility support needs to be improved and selection API needs to be added but anything else?
#webcomponents #shadowdom #customelements
J'ai joué avec les #microfrontends. Je suis partis sur l'option #CustomElements / #WebComponents, plutôt que #WebPack et #ModuleFederation. C'est bien parti, mon objectif est de fédérer dans mon blog tous mes projets persos... là j'ai un blog en #SvelteKit, qui intègre un QR Code #StencilJS, et une app #AngularElements. 🤹♀️
L'article est en mode brouillon, je vais l'étoffer mais la démo est live : https://lacourt.dev/2023/01/21
#MicroFrontends #customelements #webcomponents #webpack #ModuleFederation #sveltekit #stenciljs #angularelements
📢 Web Components bookmarks project finally got a proper Home page! 🎉
- Projects about Web Components that I recommend,
- Other #opensource projects I'm proud to be part of.
Check it out and please #boost to spread the word if you like the project!
My goal is to make it an ultimate knowledge base about #CustomElements, #ShadowDOM and other #WebComponents standards.
#opensource #boost #customelements #shadowdom #webcomponents
📢 Web Components bookmarks project finally got a proper Home page! 🎉
- Featured projects related to #WebComponents,
- Other #opensource projects I'm proud to be part of.
Check it out and please #boost to spread the word if you like the project!
My goal is to make it an ultimate knowledge base about #CustomElements, #ShadowDOM and other standards.
#webcomponents #opensource #boost #customelements #shadowdom
📢 Web Components bookmarks project finally got a proper Home page! 🎉
- Featured projects related to #WebComponents,
- Other #opensource projects I'm proud to be part of.
Check it out and please #boost to spread the word - especially if you use #CustomElements and #ShadowDOM.
#webcomponents #opensource #boost #customelements #shadowdom
📢 Web Components bookmarks project finally got a proper Home page! 🎉
- Featured projects about #WebComponents
- Other #opensource projects I'm proud to be part of.
Check it out and please #boost to spread the word - especially if you use #CustomElements and #ShadowDOM.
#webcomponents #opensource #boost #customelements #shadowdom
Upgraded #WebComponents bookmarks to @eleventy 2.0 beta and it went super smooth! Excited about the package-lock.json getting smaller as a result.
Also, added the #rss feed - subscribe for monthly updates on #CustomElements, #ShadowDOM and other related news (there's now a link in the footer):
#webcomponents #rss #customelements #shadowdom
Upgraded #WebComponents bookmarks to @eleventy 2.0 beta and it went super smooth! Excited about the package-lock.json getting so much smaller.
Also, added the #rss feed - subscribe for monthly updates on #CustomElements, #ShadowDOM and other related news (there's now a link in the footer):
#webcomponents #rss #customelements #shadowdom
Upgraded #WebComponents bookmarks to @eleventy 2.0 beta and it went super smooth! Excited about the package-lock.json getting so much smaller.
Also, added the #rss feed - subscribe for monthly updates on #CustomElements and #ShadowDOM related things (there's a link in the footer):
#webcomponents #rss #customelements #shadowdom
#WebComponents bookmarks got a new category: Testing Helpers! Here you can find a few useful libraries that make #testing #CustomElements and #ShadowDOM easy:
#webcomponents #testing #customelements #shadowdom
#WebComponents bookmarks got a new category: Testing Helpers! Here you can find useful libraries that make #testing #CustomElements and #ShadowDOM easy:
#webcomponents #testing #customelements #shadowdom