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

2023-12-22

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

简短回答：

快速测试：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");
  
}

详细解答：

你必须检查一下这个清单 https://www.polymer-project.org/0.5/resources/compatibility.html在聚合物的网站上。

Template

HTML 导入

自定义元素

影子 DOM

必须支持这些功能：

http://www.html5rocks.com/en/tutorials/webcomponents/template/ 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 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 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 https://www.polymer-project.org/0.5/platform/shadow-dom.html

如何检查浏览器是否支持 Shadow DOM https://stackoverflow.com/questions/29730398/how-to-check-if-a-browser-supports-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 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 https://github.com/webcomponents/webcomponentsjs/issues/26

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

Browser

polymer