#shadowDom
But #WebComponents are #JavaScript which they would need to load *somehow*. Assuming we could get them to bundle it they'd still be giving our script free reign to manipulate the page anyway we see fit. We currently rely on some hacks to achieve #CSS isolation without #shadowDOM but other than that I'm not certain a #web #component would improve anything.
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.
I basically live inside of shadow DOM
#shadowDom #CSS #frontend #webDevRE: https://infosec.exchange/users/mdh/statuses/110261873076894404
For folks who like Hotwire Turbo 7 _and_ also like Declarative #ShadowDOM, you absolutely need this:
https://github.com/whitefusionhq/turbo-shadow
Latest release just tested, now supporting the new standard `shadowrootmode`.
Enjoy!
#Development #Releases
WebKit features in Safari 16.4 ยท Appleโs most gigantic WebKit release yet, including PWA features! https://ilo.im/11yb28
_____
#Browser #Safari #WebKit #WebDevelopment #WebDev #Frontend #PWA #WebApp #WebPush #AppBadges #WebComponents #ShadowDOM #CSS #HTML #JavaScript #WebAssembly #WebAPI #DeveloperTooling #WebInspector #SafariWebExtensions #SafariContentBlockers #Image #Audio #Video
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
#Development #Challenges
How Shadow DOM and accessibility are in conflict ยท The current situation and what needs to happen next https://ilo.im/11add1 ยท by @sundress
_____
#WebDevelopment #WebDev #WebComponent #ShadowDOM #Accessibility #A11y #HTML #ARIA
๐ข #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.
People complain about the complexity of shadow DOM today but let's remember that the original v0 API had multiple generations of shadow roots per host and ability to include an older shadow root via <shadow> element. #shadowdom #webcomponents
#Development #Releases
Declarative Shadow DOM ยท Safari will support Shadow DOM, which is a part of Web Components https://ilo.im/112mum
_____
#WebDevelopment #WebDev #Browser #Safari #WebKit #API #JavaScript #ShadowDOM #WebComponent
https://webkit.org/blog/13851/declarative-shadow-dom/
Declarative Shadow DOM is in WebKit.
There are honest reasons that people started using and still use #reactjs; I lived through Angular, and Backbone don't try to tell me there weren't reasons!
I still think we should re-evaluate those reasons, because things have changed; we have #ESModules now, #webcomponents #shadowdom etc.
I don't care about web performance, I just want to build websites with a team of people and not have a bunch of indeterminate UI behavior. React delivered the hell out of that, can the post-React stack?
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:
Now when #Safari has enabled support for declarative #ShadowDOM in the TP 162, there's also an update from #Firefox on the new version of the proposal: "neutral" position changed to "positive". Huge for #WebComponents ๐
https://github.com/mozilla/standards-positions/issues/335#issuecomment-1404996929
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:
Past informs the present: Our approach to CSS ยท The evolution of CSS and its methodologies https://ilo.im/10bo7u ยท by @colepeters
_____
#development #approaches
#WebDevelopment #webdev #CSS #AtomicCSS #BEM #OOCSS #CSSinJS #CSSmodules #ShadowDOM #WebStandard
Declarative #ShadowDOM is getting enabled by default in #WebKit:
https://github.com/WebKit/WebKit/commit/36f99b7c366702e9827a0d33989eb3b27eaa301a
#Firefox: Henri Sivonen commented about some plans to take a look at the recent version of Declarative #ShadowDOM proposal from the perspective of Gecko's parser. Looking forward to the good news!
https://github.com/whatwg/html/pull/5465#issuecomment-1362758197
#WebKit: Ryosuke Niwa created a PR to enable Declarative #ShadowDOM by default. At the time of writing this PR is also in review and waiting for approval. Hopefully it will be merged soon and then land in #Safari TP as well.
#WebKit: fixed a bug preventing #ShadowDOM content from being exposed to #accessibility clients when used in an aria-modal or dialog. This change was released in #Safari TP 160.
https://webkit.org/blog/13639/release-notes-for-safari-technology-preview-160/
#Chrome: published intent to prototype streaming support for Declarative #ShadowDOM. This will introduce differences compared to the original implementation added in Chrome 90.
https://groups.google.com/a/chromium.org/g/blink-dev/c/Ovz-6Dte-qA/m/ABaUFnt3CQAJ
#WebKit: Ryosuke Niwa prototyped support for Declarative #ShadowDOM. This resulted in a new round of discussion around the proposal and some updates by Mason Freed from Chromium / Blink team.
#WebKit: updated #ShadowDOM and dialog element focusing to the latest spec with some improvements to delegatesFocus logic. This change was also released in #Safari TP 151.
#WebKit: added support for โGet Element Shadow Rootโ, โFind Element From Shadow Rootโ, and โFind Elements From Shadow Rootโ commands. This change was released in #Safari TP 151.
https://webkit.org/blog/13093/release-notes-for-safari-technology-preview-151/
#WebKit: fixed a bunch of issues related to #CSS selectors like :host(), :focus, :focus-within, and :lang when used in combination with #ShadowDOM. These fixes were released in #Safari TP 150.
https://webkit.org/blog/13066/release-notes-for-safari-technology-preview-150/
#Firefox: added support for constructable stylesheets. After long discussions on the API shape, this proposal finally reached consensus! This feature landed in Firefox 101 released on May 31.
#ShadowDOM #WebComponents #css
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/101
#Firefox: added the WebDriver:GetElementShadowRoot command to retrieve the shadow root (open or closed) hosted by a given element. This change was released in Firefox 96 on January 11.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96
#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.
@graynorton @mcneely It's a #Lit issue because Lit is alone among the major frameworks in putting component content in #ShadowDOM. It's true that a fix probably needs shadow dom changes, but people using Lit need to know the uses that they're going to have to code manually, and it's Lit folks who have the most expertise to use when pushing for these #WebStandards changes.
#WebComponentsAdvent Day 13: Styling Options.
Styling #WebComponents is a huge topic: new #CSS selectors, custom CSS properties, Constructable Stylesheets... Some people suggest to ditch #ShadowDOM, others want to use #Tailwind. Let's dive into it!