<title>伪类:host与:host-context</title>
<h1>伪类:host与:host-context</h1>
<p>Old Name: Chen, Gangsheng</p>
<span class="name">New Name: Jackie Chen</span>
<template class="root-template">
:host { color: red; border: 1px solid red; } :host(*){ color: green; } <p><content select=".name"></content></p>
<p><content select=""></content></p>
__________________________________________________________________________________________________________
<p class="movie-star">Movie Star</p>
<template class="star-template">
:host(.movie-star) { color: green; } :host(button) { color: red; }__________________________________________________________________________________________________________
<template class="color-template">
var host = document.querySelector('.host'); var root = host.createShadowRoot();
var template = document.querySelector('.root-template'); root.appendChild(template.content);
var root1 = document.querySelector('.movie-star').createShadowRoot(); var root2 = document.querySelector('button').createShadowRoot(); var template = document.querySelector('.star-template'); root1.appendChild(document.importNode(template.content, true));
root2.appendChild(document.importNode(template.content, true));
var root11 = document.querySelector('.red').createShadowRoot(); var root22 = document.querySelector('.green').createShadowRoot() var template = document.querySelector('.color-template'); root11.appendChild(document.importNode(template.content, true));
root22.appendChild(document.importNode(template.content, true));
