is-dom4-supported.js 
does this JavaScript environment conform to DOM 4?
What is this?
I wanted my web apps to be able to detect support for Polymer
and the WebComponents poly-fills.
Combined with an ECMAScript 5 feature-detect, this project
ought to answer the following questions:
- does the environment support Polymer and WebComponents.js (lite)?
- do I need to continue with a non-Polymer fallback?
I've checked and confirmed that this project tests all the parts of DOM 4 that
WebComponents.js (lite) depends upon (plus some other things I'm interested in).
Supported Environments
I've manually tested in a range of environments:
-
true: Chrome (43), (Mobile) Safari (8), Firefox (38), Internet Explorer
(10, 11), Edge
-
false: Internet Explorer (6, 7, 8, 9)
Usage
- CommonJS (e.g. Node.js, Browserify, etc) use index.js
var isDOM4Supported = require('is-dom4-supported');
console.log(isDOM4Supported()); // `true` or `false`
<script src="dist/index.js"></script>
<script>
console.log(isDOM4Supported()); // `true` or `false`
</script>
WebComponents.js poly-fills CustomEvent and MutationObserver, so you'll
probably want to ignore the results for these tests:
var isDOM4Supported = require('is-dom4-supported');
console.log(isDOM4Supported(null, {
ignore: ['dom4.customevent', 'dom4.mutationobserver']
})); // `true` or `false`
API
isDOM4Supported(el, options)
- @param {
Element} [el] a DOM Element to run tests against
- @param {
SupportedOptions} [options]
- @returns {
boolean|Object} true|false unless returnObject is true
This project creates a temporary unattached DOM Element if you do not provide one.
If you are performing other tests against DOM Elements,
you might consider reusing the same one, hence the optional parameter.
The report Object contains the results of individual tests prefixed by their DOM level (e.g. "dom4.customevent"),
as well as summary properties that are true if all preceding properties are true (e.g. "dom4").
@typedef {Object} SupportedOptions
- @property {
string[]} ignore - array of tests to ignore for summaries
- @property {
boolean} returnObject - if true, function returns a detailed Object
