<!DOCTYPE html>
<body>
<div id=host1>
<template shadowrootmode=open>
<div>hello world</div>
</template>
</div>
<div id=host2>
<template shadowrootmode=closed>
<div>hello world</div>
</template>
</div>
<div id=host3>
<template shadowrootmode=open shadowrootdelegatesfocus=true>
<div>hello world</div>
</template>
</div>
<div id=host4>
<template shadowrootmode=open>
<slot></slot>
</template>
<div>light dom slotted</div>
</div>
<div id=host5>
<div>light dom</div>
</div>
<script>
host5.attachShadow({mode: 'open'}).innerHTML = '<div>hello world</div>';
</script>
<div id=host6></div>
<script>
host6.attachShadow({mode: 'open'}).innerHTML = '<div>hello world</div>';
</script>
<div id=host7><template shadowrootmode=open></template></div>