Я пытаюсь создать «включенную» версию пользовательского элемента, где, когда он оборачивает некоторый произвольный HTML, он будет выборочно выбирать содержимое из этой обернутой разметки и отображать его в своем теневом теле DOM. Вот так:
<tab-content>
.....
<span class="name">John</span>
<span class="email">Email</span>
.....
</tab-content>
Когда я использую следующий код, я вижу содержимое в теневой модели DOM как есть, когда этот код запущен.
Что я могу сделать не так?
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="import.html" rel="import" />
</head>
<body>
<tab-content>
<div id="test">
<span class="name">
John
</span>
<span class="email">
[email protected]
</span>
</div>
</tab-content>
</body>
</html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<template id="tag">
<div class="content">
This is the shadow DOM content. Your name is <content select="#test .name"></content> and email is <content select="#test .email"></content>
</div>
</template>
<script>
var proto = Object.create(HTMLElement.prototype);
var hostDocument = document.currentScript.ownerDocument;
proto.createdCallback = function () {
var root = this.createShadowRoot();
root.appendChild(hostDocument.getElementById("tag").content);
}
var tab = document.registerElement("tab-content", {
prototype: proto
});
</script>
style.css
@charset "UTF-8";
/* CSS Document */
.test-content {
background-color: #f00;
widthL 200px;
height: 300px;
}