Question

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

寻找不太复杂的“自定义元素”功能检测方法，
我想出了：

<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％；这种方法可能会闪烁文字（非常简短）

问题：有没有更优雅的解决方案来进行“自定义元素”功能检测？

组份

Answer 1

使用类或其他方法保护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>

此外，如果您打算这样做，您可能还希望提供指向该页面的链接，该页面向他们显示了在哪里可以下载更好的浏览器。

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

1 个答案: