Пользовательский элемент не работает в IE 11 после переноса - PullRequest
Новая
       166

Пользовательский элемент не работает в IE 11 после переноса

3 голосов
/ 27 апреля 2020

Я создал веб-компонент многократного использования, и ради этого вопроса назовем его <custom-el>. Чтобы вызвать реализацию этого пользовательского элемента, я записываю его в мои файлы шаблона следующим образом <custom-el class="container-for-custom-tag"></custom-el>, а в компоненте я добавляю дочерние элементы к этому тегу. Когда механизм браузера обнаруживает этот тег, мой компонент вызывается и добавляет в него теги.

Чтобы он работал в IE 11, я использовал polyfill document-register-element, и он переносит файл успешно. Я не получаю никаких ошибок в IE 11 при загрузке этого переданного файла. Но поскольку тег также не распознается в IE11, в пользовательском интерфейсе ничего не отображается. Что я здесь не так делаю?

Я тоже пытался использовать плагины Babel, получаю тот же результат. Файл передается, но в интерфейсе ничего не отображается из-за тега.

Теперь у меня есть решение вызвать веб-компонент по требованию, а не вызывать его из-за тега HTML. Но я действительно хочу знать, есть ли что-нибудь еще, что можно сделать, чтобы решить это. Я увидел на странице GitHub элемента document-register-element, что они также поместили пользовательский тег на страницу HTML в примерах, но как это работает для них, в чем я не уверен.

Вот как я определяю свой пользовательский элемент: 

class CustomEl extends HTMLElement {
 // Inside this I render the child elements
 // This HTML gets appended to the custom-el as children: 
 //<div class="text-container">20</div>
 // I m not using shadow root
}
// Here I define the custom element
customElements.define('custom-el', CustomEl);

Вот как я его вызвал: 

// The following code goes in the template HTML file
<div class=“wrapper-container”>
 <custom-el id="js-custom-el-conatiner”></custom-el>
<div>

Когда я загружаю его в браузер, Я получаю следующий вывод в инспекторе браузера: 

<div class=“wrapper-container”>
    <custom-el id="js-custom-el-conatiner” >
         <div class="text-container">20</div>
    </custom-el>
<div>

Для IE мне требуется polyfill/document-register-element в этом файле согласно странице github документация . class CustomEl extends HTMLElement компилируется, и я не получаю никакой синтаксической ошибки или какой-либо ошибки в файле. Но поскольку тег HTML по-прежнему <custom-el>, который вызывает реализацию, он не вызывается, потому что этот элемент не распознается механизмом браузера IE.

1 Ответ

4 голосов
/ 04 мая 2020

Здесь не проблема JS - вы доказали, что пользовательский элемент выполняет свою работу и превращает его в DOM. Теперь убедитесь, что вы применили CSS к этому элементу, в основном говоря браузеру, как его визуализировать. Начните с свойства basi c display. Без JSFiddle или CodePen или чего-либо, с чем можно поиграть, трудно сказать вам точную проблему. В большинстве случаев проблема заключается в том, чтобы вставить пользовательский элемент в IE11 из-за того, что он не поддерживает необходимые конструкции ES6, и приходится полагаться на полифиллы, такие как https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

...