Дублированный HTML элементы внутри <ссылка отн = «импорт»> тег

Когда я использую HTML импорт, я вижу это:Дублированный HTML элементы внутри <ссылка отн = «импорт»> тег

Означает ли это, что я до сих пор одинhtml элемент, одинhead и body?

Или, вместо этого, эти элементы дублируются?

index.html

<head> 
    <link rel="import" href="parts.html"> 
</head> 
<body> 
    <script> 
     var link = document.querySelector('link[rel="import"]'); 
     var content = link.import; 
     var el = content.querySelector('.foo'); 
     document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body>

parts.html

<div class="foo"> 
    <p>Foo</p> 
</div> 

<div class="bar"> 
    <p>Bar</p> 
</div>

источник

2016-04-01 john c. j.

Интересно. Я бы не стал слишком беспокоиться о том, что дерево DOM выглядит в Инспекторе. Это похоже на iframes. –

@MrLister Итак, вы имеете в виду, что показанное дерево DOM не является реальным? В таком случае, возможно, вы знаете какой-то способ увидеть фактическое (реальное) дерево DOM? –

@maioman Пример (немного упрощен) из [статьи HTML5Rocks] (http://www.html5rocks.com/en/tutorials/webcomponents/imports/). –

Я посмотрел в свой сценарий (сделал это fiddle);

в основном через import собственности вы можете включить что-либо .html, файл может содержать (предоставление доступа к отдельностоящий источника .html),

ресурс встроен в браузер, как IFRAME (по крайней мере, это способ реализации хром делает доступный ресурс - not implemented in other major browsers).

Итак, у вас все еще есть один элемент html, ОДНА голова и ОДНО тело, встроенный ресурс выглядит как iframe, и это то, что вы видите в своих dev-инструментах.

источник

2016-04-01 17:19:02 maioman

Дублированный HTML элементы внутри <ссылка отн = «импорт»> тег

ответ

Смежные вопросы