Polyfill тега шаблона для IE 11 - не работает с таблицей tr и td

Я работаю с polyfill js, который позволяет обрабатывать теги для браузеров, которые его не поддерживают.

Исходный код полифилла на jsfiddle

Источник вопрос

Но я заметил, что в IE 11 этот полифилл не работает с шаблонами, содержащими теги <tr> и <td>.

Мой пример на jsfiddle

Проблема в том, что когда мы пытаемся получить дочерние узлы из узла тега шаблона

elPlate.childNodes

он возвращает все, кроме дочерних элементов <tr> и <td>, как если бы внутри <template> таких тегов не было.

Я что-то упускаю? Есть ли обходные пути для этой проблемы?

P.S. Я не смог добавить комментарий к исходной проблеме из-за отсутствия репутации. Простите за это.


javascript html templates polyfills html5-template
person Gintonic    schedule 15.10.2014    source источник
comment
У меня была та же проблема, а также проблема с полифиллом WebComponents: github.com /webcomponents/webcomponentsjs/issues/632 Вы можете обойти это, используя ‹div› и display: table(-cell) (но тогда, конечно, это не семантика). Интересно, что ‹li› без контейнера (‹ul› или ‹ol›) работает.   -  person ernesto    schedule 10.10.2016

Ответы (2)


arrow_upward
8
arrow_downward

Это происходит потому, что <tr> должен находиться внутри <table>, чтобы быть действительным HTML. В вашем <template> вы указали свободный <tr>, у которого нет родителя <table>. IE считает это ошибкой и удаляет из DOM. Следовательно, documentFragment вашего шаблона не содержит <tr> и <td>.

Печальный факт: IE просто не готов к тегам шаблонов HTML5. Вероятно, Microsoft потребовалось бы очень много времени, чтобы реализовать это, а существующие версии браузера IE стали действительно устаревшими. Только тогда мы сможем надежно начать использовать теги шаблона HTML5.

Обходной путь: не используйте <template>; изучите шаблонные решения, используя вместо этого <script type="template">. Я считаю, что они должны хорошо работать. Некоторые популярные:

person light    schedule 24.07.2015

arrow_upward
0
arrow_downward

Вы можете обойти это, если действительно хотите работать с <tr> в шаблонах в IE11.

Что вы делаете, так это то, что вместо того, чтобы помещать <tr> непосредственно в шаблоны, вы добавляете целую таблицу, например

<template>
   <table>
      <tr>
         //foo bar
      </tr>
   </table>
</template>

Это приводит к тому, что IE11 больше не «исправляет» ваш HTML и возвращает его как есть. После того как вы клонировали HTML-код из шаблона, вы можете правильно извлечь <tr> из таблицы и использовать его везде, где это необходимо.

person Mike    schedule 31.03.2017