#ShadowDOM
Long live HTML and CSS. Web Components is the most underrated spec of all time, now that no one has to write them or understand shadowDOM maybe they'll get adopted
November 3, 2026 at 5:15 PM
All 3 Browser vendors wrote Web Components.

Every <input>, <textarea>, <video> or any *complex* element IS a Web Component
You can check their different shadowDOM implemenations in DevTools

A future without WCs is going to result in some rather simple HTML pages

But who knows what CSS will bring
November 8, 2026 at 4:17 PM
Every <input>, <textarea>, <video> or any *complex* element IS a Web Component built by the 3 browser vendors.
You can check their different shadowDOM implemenations in DevTools

So a future without Web Components is going to result in some rather simple HTML pages.
But who knows what CSS will bring
November 4, 2026 at 11:47 AM
Every <input>, <textarea>, <video> or any *complex* element IS a Web Component built by the 3 browser vendors.
You can check their different shadowDOM implemenations in DevTools

So a future without Web Components is going to result in some rather simple HTML pages

But who knows what CSS will bring
November 6, 2026 at 1:25 PM
Every <input>, <textarea>, <video> or any *complex* element IS a Web Component built by the 3 browser vendors.
You can check their different shadowDOM implemenations in DevTools

So a future without Web Components is going to result in some rather simple HTML pages.
But who knows what CSS will bring
October 29, 2026 at 1:21 PM
Adding server side rendering to that only requires an `html` tag that outputs strings, and hydration on top of Declarative ShadowDOM, with as low of a complexity as possible.
October 23, 2026 at 10:58 PM
Then on the client, the Declarative ShadowDOM pre-renders your view, and the client-side CE logic takes over the DOM.

You would then have two versions of your logic (one in Python, one in JS), but it would work.

I have two too: one in C (in a TS-to-C native path), one in JS (types stripped),
October 23, 2026 at 8:30 PM
Everyone uses Web Components

Every <input>, <select>, <textarea> Element
*IS* a Web Component.

Each vendor implements their own code in shadowDOM for "complex" elements.

So if JavaScript developers at Chromium, Mozilla and Apple can create Web Components...

You should be able too
October 21, 2026 at 11:42 AM
🚨 EUVD-2026-105633
📊 8.8/10
🏢 Google

📝 Memory corruption in ShadowDOM in Google Chrome prior to 156.0.8078.47 allowed a remote attacker to execute arbitrary code inside the sandbox via a craft...

🔗 https://euvd.enisa.europa.eu/vulnerability/EUVD-2026-105633

#cybersecurity #infosec #cve #euvd
October 21, 2026 at 5:03 AM
DSD - Declarative ShadowDOM is handled by the Browser
October 17, 2026 at 8:32 AM
Ah, I'm guessing it might not have taken ShadowDOM into account.
October 7, 2026 at 7:49 PM
> Do you prefer shadow DOM or clean CSS naming?

If you are used to BEM then that probably is your preference.

But in Web Components

section .card > .title { ... }

can become

.title { ... }

Yes, global can't style shadowDOM,
but many overlook shadowDOM will not style global either
October 4, 2026 at 10:33 AM
That's the beauty of shadowDOM,
its fully optional, you are not forged to use it.
Although, alas, tools like Lit make it the default.
October 4, 2026 at 12:11 PM
we made it safe by using ShadowDOM and some sanitization :)
October 1, 2026 at 10:53 PM
And the fun starts when you used:

:not:defined { display: none }

to prevent FOUCs or any other weird reason.

Because DSD - Declarative ShadowDOM
creates *undefined* Custom Elements

The Custom Elements JavaScript *API* makes them :defined
September 25, 2026 at 5:22 PM
HOLogram deep dive: the Input Vault — intercepting keystrokes before JavaScript reads them
_This is part 3 of "Building HOLogram", a series on the open protocol for behavioral biometrics protection in the browser. Part 0 — introduction | Part 1 — Persona Mixer | Part 2 — Privacy Budget | Part 3 — Input Vault_ The ShadowDOM Input Vault is HOLogram's first module — and arguably its most technically constrained. Its job sounds simple: intercept keyboard events before page scripts can read them, remove the timing information that identifies the user, and re-emit synthetic events that are functionally identical but behaviorally anonymous. In practice, implementing this correctly requires navigating a minefield of browser API differences, timing attack surfaces, and semantic preservation requirements. ## What the Input Vault must do The threat model is specific. Keystroke dynamics classifiers extract **inter-keystroke interval (IKI)** timing — the time between consecutive keydown and keyup events — as their primary feature. These intervals, measured across a typing session, produce a timing signature that is highly individual and stable across time. The Input Vault must: 1. **Intercept** native keyboard events at the earliest possible point — before any page script can observe the real timestamps 2. **Remove** the timing information — specifically, the high-resolution timestamps that make IKI measurement possible 3. **Re-emit** synthetic events that carry the correct semantic content (which key was pressed) but not the real timing 4. **Preserve** all other aspects of the interaction — the key identity, the event sequence, the modifier keys — so the page functions correctly The semantic content of what you type must be preserved exactly. The temporal pattern must not. ## The browser API challenge This is where the implementation gets complicated. Browser extensions operate in a layered security model. Page scripts run in the page context. Extension content scripts run in an isolated world that can access the DOM but is separate from the page's JavaScript. The extension background runs in yet another context. The question for the Input Vault is: **at which layer can we intercept keyboard events before the page sees them?** ### Option A: Content script event listener A content script can register an event listener on `document` with `useCapture: true` — which fires during the capture phase, before the event reaches the page's own listeners. This gives us early access to the event, but **not before the page**. The capture phase fires before the target and bubble phases, but a page script that also registers a capture-phase listener on `document` would still receive the real event with the real timestamp. ### Option B: Event interception at the window level Some browser APIs allow intercepting events at the `window` level before they propagate to `document`. Whether this provides true pre-page interception depends on the browser and the specific API. ### Option C: Shadow DOM isolation The "ShadowDOM" in "ShadowDOM Input Vault" refers to using Shadow DOM's encapsulation to isolate input handling. Input elements inside a closed Shadow DOM are not directly accessible to page scripts — events dispatched from within the shadow root can be re-emitted as synthetic events to the page without exposing the original. This approach has promise but comes with significant constraints: it requires that input elements be inside a Shadow DOM we control, which is not always the case for arbitrary web pages. ### Option D: Browser-native input interception API Some browsers provide extension APIs that allow intercepting input at a level below the page context entirely — before the event enters the DOM at all. The availability, behavior, and permissions required for these APIs vary significantly across Chrome, Firefox, and Safari. ## The semantic preservation requirement Whatever interception approach is used, the re-emitted synthetic event must be semantically identical to the original — or the page breaks. This means the synthetic event must correctly carry: * The key identity (`key`, `code`, `keyCode`, `charCode`) * The modifier state (`shiftKey`, `ctrlKey`, `altKey`, `metaKey`) * The event type sequence (`keydown` → `keypress` → `keyup`) * The `bubbles` and `cancelable` properties * The `composed` property (for Shadow DOM scenarios) The only thing that must be different is the timestamp — or more precisely, the high-resolution timing information that IKI classifiers extract. ## IME: the unsolved problem Input Method Editors (IMEs) are used to type characters in non-Latin scripts — Chinese, Japanese, Korean, Arabic, and others. IME input doesn't follow the standard `keydown`/`keypress`/`keyup` sequence. It uses composition events: `compositionstart`, `compositionupdate`, `compositionend`. How the Input Vault handles IME input is an open question. Getting it wrong means HOLogram breaks input for a significant portion of the world's users. ## What we need to find out The Input Vault design is specified. The implementation requires answers to questions that only empirical browser API research can provide: * Which API gives us the earliest interception point in each browser? * Does any approach give us true pre-page interception, or are we always racing? * What permissions does each approach require in the extension manifest? * How do Chrome, Firefox, and Safari differ in their event timing behavior? * How do we handle IME composition events without breaking non-Latin input? This is exactly the scope of **R-01: Survey browser APIs for input event interception** — the most foundational research issue in the project. If you have experience with browser extension development, especially with input event handling, this is where your contribution would have the highest impact. ## How to contribute * 📋 **R-01: Browser API survey for input event interception** — foundational research * 📋 **D-03: HCT compliance test spec for the Input Vault** — define what "correct" means * 💻 GitHub * 💬 Discussions * 📄 Whitepaper v1.0 _This concludes the "Building HOLogram" series — for now. The next articles will be written by contributors as they work through the research issues. If you pick up R-01 or D-03 and want to write about your findings, we'd love to publish it here as part of the series._
dev.to
September 25, 2026 at 7:46 AM
Struggling with screen readers ignoring your Shadow DOM components? Learn how the accessibility tree works and practical fixes like delegatesFocus and ARIA roles to bridge the gap. Make your web components truly accessible. #Accessibility #ShadowDOM #WebComponents #ScreenReaders https://blog.mspk.me
September 21, 2026 at 10:48 AM
I've never had any problems with ShadowDOM while developing Web Components. If anything they make CSS a lot easier because it flattens the specificity.
September 10, 2026 at 4:15 PM
> start calling them "custom elements" all the time.

That's is like calling everyone Joe.

* shadowDOM attached to a <div> is *not* using Custom Elements

* Customized Built-In Elements are *not* Custom Elements

Only tags with a hyphen *are* Custom Elements (even without using JavaScript)
September 8, 2026 at 6:01 AM
Haha no prob. Made it because I follow "custom elements", "web components" etc), and your "shadow exploding" comment reminded me of ShadowDOM (totally related to custom elements) which got me imagining a composed exploding effect. :D

This one last commit makes the lights more declarative:
make bit-mae particle lights more declarative · lume/lume@8c258cf
github.com
September 8, 2026 at 1:00 AM
Indeed, custom elements for the win!

(I like calling them custom elements (even as a bag for all the features like ShadowDOM, slots, scoped CSS, etc), because technically React/Vue/Svelte/Solid/Angular/Ember components are all "web components".
September 8, 2026 at 1:07 AM
I need CSS equivalent of ShadowDOM — nothing allowed in, but without all the rest of ShadowDOM stuff.

Also, this is the first I’m hearing about StyleX and people moving away from Tailwind, what did I miss? Isn’t StyleX that old Next.js thingy that didn’t quite make it?
September 3, 2026 at 6:54 PM
Many native Elements are Web Components with shadowDOM

Here is the "closed" <video> DOM in Chromium and FireFox

I presume the "closed" option for us mortal developers
is a relic of these earlier developments

Hardly serves a purpose if you can download the source and just do a replace to "open"
September 1, 2026 at 1:58 PM
<video> is built with Web Components technology many moons before the technology was made available to us mortal developers.
It has shadowDOM and HTML content us mortals can not access, like a mode:"closed" Web Component.
Take a peek inside and you will see each vendor implemented it different.
August 28, 2026 at 3:34 PM
Web Components reached browser support everywhere. Custom elements, shadow DOM encapsulation, and slot based composition ship framework independent widgets. Design systems and embeddable UI landed in vanilla JS without build tooling. #WebComponents #ShadowDOM #Frontend
August 20, 2026 at 12:11 PM