Search code examples
htmlhtml-imports

Duplicated HTML elements inside <link rel="import"> tag

When I use HTML import, I see this:

enter image description here

Does it mean that I still have one html element, one head and one body?

Or, instead of that, these elements have duplicated?

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>
Solution

  • I looked into your scenario (made this fiddle);

    basically through the import property you can include anything an .html file can contain (giving access to a detached .html source),

    the resource is embedded in the browser like an iframe (at least this is the way the chrome implementation makes the resource available - not implemented in other major browsers).

    So you still have ONE html element, ONE head and ONE body , the embedded resource looks like an iframe ,and that's what you see in your dev-tools.