时间戳

首页 > 解决方案 > 自定义元素 v1 功能检测：针对不支持的浏览器的消息

web-component - 自定义元素 v1 功能检测：针对不支持的浏览器的消息

问题描述

我正在为支持的浏览器开发自定义元素

寻找一种不太复杂的自定义元素特征检测方法，
我想出了：

<STYLE onload="if('customElements' in window)this.innerHTML=''">
 body::before {
  font-size: 2em;
  color: red;
  content: 'This Browser does NOT support modern W3C WebComponents (Custom Elements v1)';
 }
</STYLE>

我不是 100% 确定；这种方法可能会闪烁文本（非常非常简短）

问题：是否有更优雅的解决方案来进行自定义元素特征检测？

组件

标签： web-componentcustom-element

解决方案

通过使用类或其他东西来保护 CSS，然后如果条件正确，让 JS 代码添加所需的类：

<script>
if(!('customElements' in window)) {
  document.body.classList.add('no-web-components');
}
</script>

<style>
 body.no-web-components::before {
  font-size: 2em;
  color: red;
  content: 'This Browser does NOT support modern W3C WebComponents (Custom Elements v1)';
 }
</style>

此外，如果您打算这样做，您可能还想提供一个指向页面的链接，向他们展示在哪里下载更好的浏览器。

推荐阅读