Я уже некоторое время использую пользовательские элементы v1 через polyfill. Chrome 54 (первая версия с собственной реализацией v1) начал выдавать ошибки при инициализации моих элементов:
DOMException: не удалось выполнить «createElement» в «Документе»: результат не должен иметь дочерних элементов
Оскорбительная строка проста:
let el = document.createElement('my-custom-element');
Собственная реализация Chrome, по-видимому, обеспечивает соблюдение требований спецификации, которых не было у полифилла. Согласно разделу "Требования к конструкторам пользовательских элементов" спецификация:
Элемент не должен получать какие-либо атрибуты или дочерние элементы, так как это нарушает ожидания потребителей, использующих методы createElement или createElementNS.
Элемент, который я пытался создать, добавлял дочерние элементы себе в свой конструктор.
Решение заключалось в том, чтобы следовать рекомендациям спецификации:
В общем, работа должна быть максимально отложена до connectCallback, особенно работа, связанная с получением ресурсов или рендерингом. Однако обратите внимание, что connectCallback можно вызывать более одного раза, поэтому для любой работы по инициализации, которая действительно является одноразовой, потребуется защита, чтобы предотвратить ее повторный запуск.
То есть добавьте дочерние элементы в обратный вызов с подключением и используйте флаг, чтобы гарантировать, что элемент инициализируется только при первом подключении.
