#customElements
I keep thinking that #WebComponents are the real solution; they provide CSS isolation with #shadowDOM, and would allow third parties to integrate by simply adding <html-elements>.
Trouble is; any #JS you import runs with full privileges on your user's browsers. What's really needed is a sandbox.
I think it may be a job for #Google's #AMP, but that is so poisoned it'll be a hard sell.
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
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
๐ข #WebComponents in 2023: February update.
- #Safari 16.4 beta release new features
- #Interop2023 for Web Components
- #React and #CustomElements news
๐ข #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.
#mermaid #diagrams, but authored with #html #customElements #webComponents #webDev #markdown
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?
๐ข 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.
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 bookmarks got a new category: Testing Helpers! Here you can find a few useful libraries that make #testing #CustomElements and #ShadowDOM easy:
Did you know that #WebComponents and #React can be used together?
There are several #javascript libraries for it, these two look interesting:
- React Shadow: use #ShadowDOM with React easily;
- Remount: use React components as #CustomElements.
Check out the #frameworks recipes page for more:
๐ข #WebComponents bookmarks now have a Beginner's Guide section! This is a good starting point for learning how to create #CustomElements.
Thanks to @keithamus, @calebwilliams, @passle and @alangdm for great articles on this topic!
Form-associated #CustomElements has been implemented in #WebKit and enabled by default:
https://github.com/WebKit/WebKit/commit/1e814e21299b575547f683ac5e6872e3d2702dc1
Iโve been working on a personal open source project in the past couple of months, and spent some time with `DOMTokenList`. Hereโs a write up of what I learned from trying to use it in custom elements. https://marchbox.com/articles/2023-01/using-domtokenlist/ #customelements #webcomponents
Today's additions to #WebComponents bookmarks:
- <code-block>
- <esri-map-view>
- <mapml-viewer>
- Svelecte
Check out the growing list of standalone #CustomElements:
#WebKit: Alexey Shvaika submitted a PR to add support for form associated #CustomElements. This change is currently in review, hopefully it will land in one of the next #Safari Technology Preview releases.
#WebKit: 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).
#WebComponents 2022 year in review thread! Here is a list of notable #CustomElements and #ShadowDOM fixes and other features that landed in the browsers this year, and some proposals currently being discussed and prototyped.
๐ข The webcomponents.today is now #opensource! ๐
- A good old static website built with @eleventy โก
- Only #html and #css so far, no #javascript ๐
Using #WebComponents, #CustomElements and #ShadowDOM?
Do check it out! PRs are welcome! โ๏ธ
Please #boost for more visibility ๐ and give it a star on #GitHub! โญ
#WebComponentsAdvent Day 21: Case Studies.
Today's update is a list of real-world cases and stories shared by different teams who used #WebComponents in production. Do check it out especially if you consider using #CustomElements or #ShadowDOM in your project.
I'm calling a #CustomElements course with #HerlockSholmes as a mascot, and he'll say his stamp phrase every time exercise solved:
"Elementary!" ๐
I'm not sure how search on Mastodon works, but if you're searching for #webcomponents #progressivewebapps #pwa #html #css #javascript #js #customelements #webapps #webdevelopment #chromeos #react #reactjs #graphql #ebikes #evs #portland #oregon #pdx #crypto #cryptocurrency #bitcoin #btc #icp #internetcomputer #icpeople #helium #hnt #ipfs then you should follow me!!!
So ... I think I have to recommend against using #Lit to build whole websites, because it doesn't seem to support fragment links (https://example/#this-is-the-fragment) well or at all. It's great at building discrete elements without user-addressable parts, but that's not enough for rendering the top level of a whole page.
Tell me I'm wrong at https://github.com/lit/lit/discussions/3524.
@vintprox Due to historical reasons, it's more common to use #ShadowDOM with #CustomElements. This is what most of #WebComponents tutorials and articles are all about.
IMO, to some extent it's related to the original Chrome-only V0 proposal being overly complicated. I still remember how weird it was when I first met multiple shadow roots usage in a Polymer 0.5 app that I was migrating ๐
That said, even today you can attach a shadow root to the <body>. But you probably shouldn't.
#WebComponents, #webdev, and #galaxybrain moment :jeb:
Why don't we just fuse #DataAttributes and #CustomElements? All I see in the Internet is #reinventingTheWheel of getters and setters instead of augmenting *dataset* that can already get/setAttribute for you??? It makes no sense. :KEKW:
Now, you'll probably ask: "Hey, Vint, isn't it better to place your templates for #WebComponents in one HTML file, since it's a standard way to tell editors to parse file?" ๐ค
What if I tell you there is more than one document, and I would not like to violate #DRY principle? Plus it would further commit #coupling of #CustomElements to page source, effectively losing all the benefits of #encapsulation.
Well, sorry I don't do #SSG to not repeat myself. My client specifically asked for pure HTML.
The coolest feature of io-gui is the ability to define appearance of reactive HTML #customelements in #GLSL shader code.
Element's properties and theme variables are all available in shaders so your browser can draw complex and detailed graphics in a single draw call.
Offscreen, io-gui manages a single #WebGL context that renders and updates everything.
For example, here is a slider-2d source https://github.com/io-gui/io/blob/main/src/elements/sliders/io-slider-2d.ts
Hey #WebComponents folks! Let's share our experiences with using #CustomElements and #ShadowDOM as the State Of JS 2022 survey is now open.
@ckundo Yes/no
You can't extend both LitElement & HTMLInputElement at the same time. You CAN apply ReactiveControllerHostMixin to HTMLInputElement & extend that, then use it w/ reactive controllers which work with #lit.
BUT since Safari won't implement #html spec, customized built-in elements are a no go. Luckily, new APIs like form-associated #customElements & element internals let you build autonomous custom elements which wrap native controls, forward #a11y features
https://bennypowers.dev/posts/form-associated-custom-elements/
https://bennypowers.dev/posts/form-associated-custom-elements/
Form-Associated #CustomElements are a new #webStandard by which to build custom interactive form controls like buttons, inputs, checkboxes, etc. They present a path forward for #designSystems and other custom element authors to more deeply integrate with the #web platform. In this post, we'll build a simple FACE to get a feel for the APIs.
#webdev #webcomponents #html #javascript #accessibility #a11y