#ShadowDom
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
Note it is not a Web Components show stopper,
since you are already "in" shadowDOM you can query:

𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵
.𝘲𝘶𝘦𝘳𝘺𝘚𝘦𝘭𝘦𝘤𝘵𝘰𝘳("𝘮𝘺𝘦𝘭𝘦𝘮𝘦𝘯𝘵")
.𝘴𝘩𝘢𝘥𝘰𝘸𝘙𝘰𝘰𝘵
.𝘲𝘶𝘦𝘳𝘺𝘚𝘦𝘭𝘦𝘤𝘵𝘰𝘳(`[𝘱𝘢𝘳𝘵="𝘵𝘩𝘪𝘯𝘨"]`)
August 11, 2026 at 7:23 AM
Web Components! Not necessarily ShadowDOM, but at least localizing your CSS to the template of a component is a great way to organize a project. It keeps your global stylesheets from ballooning with component specific selectors.
August 8, 2026 at 5:10 AM
And the fun part about Web Components is they are used in *almost every* web page, every "complex" HTML tag has shadowDOM
August 3, 2026 at 1:55 PM
Yeah, there's definitely use cases for custom elements with and without ShadowDOM.

Perhaps we need a definitive and somewhat official guide, that makes it crystal clear which patterns to use for varying scenarios, with the tradeoffs of each pattern, and making it clear ShadowDOM is not required.
February 2, 2026 at 4:59 AM
No, but you said you "bundling CustomElements, with ShadowDOM was a HUGE mistake", and I took that as dislike of combination of those two things.
February 2, 2026 at 4:27 AM
Using Custom Elements with ShadowDOM just requires doing some things differently, such as sharing style sheets into ShadowRoots rather than expecting a single document-level stylesheet to penetrate into ShadowRoots.
February 2, 2026 at 4:11 AM
I hear your sentiment, but I'm not exactly sure *why* you feel that way, as you haven't explained why you dislike Custom Elements and ShadowDOM together.

I use Custom Element *with* ShadowDOM the majority of the time.
February 2, 2026 at 4:11 AM
So, what I'm really saying is, when I introduce ShadowDOM for composition (yay), I don't want to break styling. What I really want is to be able to introduce a ShadowRoot to any element, for the sake of composition, *without* having to necessarily change the styling system too.
December 17, 2025 at 9:03 PM
If an element I am authoring does not have it's own representation made from sub-elements, then I don't use ShadowDOM. I only use it for element that are composed of other elements (with or without slots).
December 17, 2025 at 9:03 PM
You get DOM composition, the most important aspect of ShadowDOM. I'm not too concerned with *hiding* my DOM. I always make open shadow roots. If someone needs to reach in to customize to get going, great. They can balance their risks.

<slots> elements alone are the main reason to use ShadowDOM.
December 17, 2025 at 8:57 PM