伪类:host | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <h1>伪类:host</h1>
​
  <div class="host">
    <p>Old Name: Chen, Gangsheng</p>
    <span class="name">New Name: Jackie Chen</span>
    <h3>Movie Star</h3>
  </div>
  <template class="root-template">
    <style>
        :host { color: red; border: 1px solid red; }
        :host(*){ color: orange; }
    </style>
    <p><content select=".name"></content></p>
    <p><content select=""></content></p>
    <h4>Oscar winner</h4>
  </template>
​
</body>
</html>
<script>
  var host = document.querySelector('.host');
  var root = host.createShadowRoot();
  var template = document.querySelector('.root-template');
  root.appendChild(template.content);
</script>
HTML