Question

与下面的代码一样，导入自定义元素的实现并且是赤裸裸的，这意味着，进口文件没有身体和头部。

的index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="import" href="html/demo-element.html">
</head>
<body>
    <demo-element>hello world</demo-element>
</body>
</html>

演示element.html

<template>
    <style type="text/css">
    div {
        background-color: #F2CEE5;
        padding: 10px;
    }
    </style>

    <div>
        <content></content>
    </div>
</template>

<script type="text/javascript">
(function() {
    var thisDoc = document.currentScript.ownerDocument;
    var proto = Object.create(HTMLElement.prototype, {
        createdCallback: {
            value: function() {
                var t = thisDoc.querySelector('template');
                var clone = document.importNode(t.content, true);
                this.createShadowRoot().appendChild(clone);
            }
        }
    });
    var element = document.registerElement('demo-element', {
        prototype: proto
    });
})();
</script>

我希望您看到下面哪个是chrome dev工具显示的结果导入的文件有头部和身体，实施在某种程度上 我想知道这是否常见，或者我应该在demo-element.html中编写head and body并将实现放在正文中。

enter image description here

我应该在其中编写自定义元素的实现吗？

0 个答案: