Comments (7)
Tested in STP and Chrome and it works 🎉 http://jsbin.com/lizipoq/2/edit?html,output
Notice how focus is returned to the right place if any element within a shadow root steals focus programmatically through focus()
from inert.
sounds like a great idea to me. @valdrinkoshi do you have any interest in putting together a PR for it?
from inert.
sure i can give it a shot.
Tangential note: I'm wondering if we should drop completely the support of WebComponents v0...
from inert.
hm... I think I'm cool with dropping v0. @alice wdyt?
from inert.
from inert.
ehhhh.... it's in Chrome and will be for quite some time...
from inert.
Yeah, and that makes things harder, as we can't know if a shadowRoot
was generated via Element.createShadowRoot()
(v0) or Element.attachShadow()
(v1) http://jsbin.com/tenobar/1/edit?html,output
We could assume that if the shadowRoot
has a <content>
element that's a v0 shadowRoot, but some shadowRoots don't have distribution elements at all.
Also, we can't "cleanly" recognize if we are in a polyfilled ShadowDOM (e.g. we would have to check for window.ShadyDOM
to support the shadydom polyfill, or other checks for other polyfills).
Apart of this problem, even if we focus only on shadowDOM v1 in chrome, we have the following challenges:
- we still have to override
focus()
for elements inside a shadowRoot in order to avoid scrolling from happening (e.g. see this example http://jsbin.com/hohegoj/4/edit?html,output) - this means we don't save much because we have to traverse the tree. We can avoid this by overriding theHTMLElement.prototype.focus
where we could check if the node isinert
or inside aninert
parent. - what to do if a rootElement doesn't have a shadowRoot? If we attachShadow, we prevent other people from doing so.
Will try to deliver something on the basis that ShadowDOM v1 is natively supported, and see how good/bad it is compared to what we have currently 👌
from inert.
Related Issues (20)
- Injecting inline style violates strict style csp HOT 2
- Unknown Syntax error in IE HOT 4
- Is inert string or boolean? HOT 4
- module should not use src/index.js
- Transpile the module export HOT 1
- Specify exact browser support in MDN browser compat data
- How can I check if the polyfill is already loaded? HOT 3
- When inert library is imported more than once in a project, creates error HOT 2
- “So every modal dialog must be outside the inert container?” HOT 1
- Relation to content-visibility: hidden HOT 6
- License for NPM wicg/inert HOT 5
- should the _focusableElementsString include tabindex? HOT 3
- Video elements being focused HOT 1
- `Element is not defined` in deno
- Styles are too easily overridden
- Polyfill being applied in Chrome 102 HOT 3
- Tests should not run against browsers that have implemented inert
- Add new gh webhook?
- Status of incubation HOT 4
- W3C Software and Document License (2015/05/13) was expired HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inert.