Comments (5)
HTMLTemplateElement.prototype.hasOwnProperty("shadowRoot");
from declarative-shadow-dom.
Hmm very good point. Suggestions for a better way to feature detect?
from declarative-shadow-dom.
This works in Chrome canary with --enable-blink-features=DeclarativeShadowDOM
, but setting .innerHTML
to a string is not compatible with some trusted types CSP configs, so it's not what we'd generally recommend:
let hasNative;
export function hasNativeDeclarativeShadowRoots() {
if (hasNative === undefined) {
const div = document.createElement('div');
div.innerHTML = `<div><template shadowroot="open"></template></div>`;
hasNative = !!div.firstElementChild.shadowRoot;
}
return hasNative;
}
It would be good to have some reliable way to tell, so that polyfills of the feature can avoid walking the document for templates.
from declarative-shadow-dom.
@domenic do you have any recommendations here? The original
'shadowRoot' in HTMLTemplateElement.prototype
suggestion already returns true. Have we, in the past, added hooks that are just for doing feature detection? I.e. I could see adding
'supportsDeclarativeShadowDOM' in HTMLTemplateElement.prototype
but that seems ugly.
from declarative-shadow-dom.
Thanks - that works! I've updated the explainer accordingly, but I still need to implement this in Chromium.
from declarative-shadow-dom.
Related Issues (18)
- Consider using a separate tag HOT 3
- This is literally the best Web Components feature since sliced cheese. HOT 1
- Support for addEventListener HOT 1
- Usage with Certain Built-In Elements HOT 1
- declaritive shadowroot inside an template HOT 7
- Add CSS property HOT 1
- Mutation observability HOT 8
- Based on the clock example I made a quick polyfill (not complete as light-DOM slots are not supported)
- Shadow DOM streaming issue HOT 2
- Bring back HTML Imports using link
- Attribute names should not contain underscores HOT 1
- Multiple declarative shadow roots inside a single host HOT 5
- Interaction with disabledFeatures HOT 3
- Intersection semantics with Scoped Registries HOT 4
- Experimental Chrome implementation not working when rendered from React HOT 3
- Performance compared to custom element solution HOT 3
- getInnerHTML shouldn't distinguish between open and closed HOT 8
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 declarative-shadow-dom.