43 lines
1.2 KiB
HTML
43 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<template id="for-host-1">
|
|
<style>
|
|
:host { border: 1px solid #f09; }
|
|
</style>
|
|
I ♥ <slot name="what-I-love"><slot>
|
|
</template>
|
|
|
|
<template id="for-host-2">
|
|
<style>
|
|
:host { border: 1px solid #000; }
|
|
</style>
|
|
I <strike>♥</strike> <slot name="what-I-hate"><slot>
|
|
</template>
|
|
|
|
<div id="host1">
|
|
<span name="what-I-love">Shadow DOM<span>
|
|
</div>
|
|
|
|
<div id="host2">
|
|
<span name="what-I-hate">Shadow DOM<span>
|
|
</div>
|
|
|
|
<script>
|
|
var host1 = document.querySelector('#host1');
|
|
var host1ShadowRoot = host1.attachShadow({mode: 'closed'});
|
|
var host1ShadowContent = document.importNode(document.querySelector('#for-host-1').content, true);
|
|
host1ShadowRoot.appendChild(host1ShadowContent);
|
|
|
|
var host2 = document.querySelector('#host2');
|
|
var host2ShadowRoot = host2.attachShadow({mode: 'closed'});
|
|
var host2ShadowContent = document.importNode(document.querySelector('#for-host-2').content, true);
|
|
host2ShadowRoot.appendChild(host2ShadowContent);
|
|
</script>
|
|
</body>
|
|
</html>
|