如何检查浏览器是否支持Polymer？

Question

我如何检查（JS或HTML代码）当前浏览器是否支持Polymer？

Answer 1

简短回答：

快速测试：Firefox 38.0.5警告“否”，而Chrome 44.0.2403.130 m警告“是”

 function supportsPolymer() { return 'content' in document.createElement('template') && 'import' in document.createElement('link') && 'registerElement' in document && document.head.createShadowRoot; } if(supportsPolymer()) { //Good to go alert("Yes"); } else { //Is not supported alert("No"); } 

详细解答：

您需要在Polymer的网站上查看此列表 。

• 模板
• HTML导入
• 自定义元素
• 影子DOM

必须支持这些功能：

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

 function supportsTemplate() { return 'content' in document.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

 function supportsImports() { return 'import' in document.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

 function supportsCustomElements() { return 'registerElement' in document; } if (supportsCustomElements()) { // Good to go! } else { // Use other libraries to create components. } 

---

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

如何检查浏览器是否支持shadow DOM

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

在一个功能：

 function supportsShadowDom() {
   return document.head.createShadowRoot;
 }

以前片段样式的未经测试的版本：

 function supportsShadowDom() {
   return 'createShadowRoot' in document;
 }

---

好的，在您实现了每个功能之后，您可以执行以下操作：

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

这是来自https://github.com/WebComponents/webcomponentsjs#browser-support的当前矩阵：

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

这也可能很有趣： https ： //github.com/webcomponents/webcomponentsjs/issues/26