<link rel="import"> 标签内的重复 HTML 元素

Question

当我使用 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>

Answer 1

我调查了你的情况（做了这个fiddle）；

基本上通过 import 属性你可以包含 .html 文件可以包含的任何内容（允许访问分离的 .html 源），

资源像 iframe 一样嵌入到浏览器中（至少这是 chrome 实现使资源可用的方式 - not implemented in other major browsers）。

所以你仍然有一个 html 元素，一个头部和一个主体，嵌入的资源看起来像一个 iframe，这就是你在开发工具中看到的。

<link rel="import"> 标签内的重复 HTML 元素

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

html

html-imports