Обнаружение функции Custom Elements v1: сообщение для не поддерживающих браузеров

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% уверен;При таком подходе может вспыхнуть текст (очень очень кратко)

Вопрос: Существует ли более элегантное решение для определения функции пользовательского элемента?

qomponents

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>

Кроме того, если вы планируете сделать это, вы можете также предоставить ссылку на страницу, показывающую, где скачать лучший браузер.