How To Check If A Browser Supports Polymer?

How am I able to check (JS or HTML code) whether Polymer is supported by the current browser or not?

Solution 1:

Short answer:

Quick test: Firefox 38.0.5 alerts "No", while Chrome 44.0.2403.130 m alerts "Yes"

functionsupportsPolymer() {
  return'content'indocument.createElement('template') && 'import'indocument.createElement('link') && 'registerElement'indocument && document.head.createShadowRoot;
}

if(supportsPolymer()) {
  
  //Good to goalert("Yes");
  
} else {
  
  //Is not supportedalert("No");
  
}

Detailed answer:

You've to check this list on Polymer's website.

• Template
• HTML Imports
• Custom Elements
• Shadow DOM

These features have to be supported:

• http://www.html5rocks.com/en/tutorials/webcomponents/template/

functionsupportsTemplate() {
  return'content'indocument.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

---

• https://www.polymer-project.org/0.5/platform/html-imports.html

functionsupportsImports() {
  return'import'indocument.createElement('link');
}

if (supportsImports()) {
  // Good to go!
} else {
  // Use other libraries/require systems to load files.
}

---

• https://www.polymer-project.org/0.5/platform/custom-elements.html

functionsupportsCustomElements() {
  return'registerElement'indocument;
}

if (supportsCustomElements()) {
  // Good to go!
} else {
  // Use other libraries to create components.
}

---

• https://www.polymer-project.org/0.5/platform/shadow-dom.html

How to check if a browser supports shadow DOM

if(document.head.createShadowRoot) {
    // I can shadow DOM
} else {
    // I can't
}

In a function:

functionsupportsShadowDom() {
   returndocument.head.createShadowRoot;
 }

Untested version in the style of the previous snippets:

functionsupportsShadowDom() {
   return'createShadowRoot'indocument;
 }

---

Okay, after you've implemented every function you can do something like this:

 if (supportsCustomElements() && supportsTemplate() && supportsImports() && supportsShadowDom()) {
   // Good to go!
 } else {
   // Use other libraries to create components.
 }

This is the current matrix from https://github.com/WebComponents/webcomponentsjs#browser-support:

<table><thead><tr><th>Polyfill</th><thalign="center">IE10</th><thalign="center">IE11+</th><thalign="center">Chrome*</th><thalign="center">Firefox*</th><thalign="center">Safari 7+*</th><thalign="center">Chrome Android*</th><thalign="center">Mobile Safari*</th></tr></thead><tbody><tr><td>Custom Elements</td><tdalign="center">~</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td></tr><tr><td>HTML Imports</td><tdalign="center">~</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td></tr><tr><td>Shadow DOM</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td></tr><tr><td>Templates</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td><tdalign="center">✓</td></tr></tbody></table>

This may be interesting, too: https://github.com/webcomponents/webcomponentsjs/issues/26