Css :host是什么？

今天想要精进（没事干）一下我的HTML和CSS技术，所以准备临摹一下谷歌的首页，也就是那个上面是搜索框，下面是快捷方式的页面。 类似于这个页面: 谷歌搜索页面的样式，不过下面没有Google搜索什么的，只是一个简单的快捷方式，将常用的页面添加成了快捷方式（之所以不上图是因为不想让你们看到我的快捷页面，哈哈）。

其实这个一看就感觉很容易就能做出来的效果了，唯一难度应该就是在下面快捷方式中的样式了。 碰到就会发生一个小变化，这个其实使用:hover伪类即可。但是在做的过程中，我也在使用F12查看谷歌自身的代码，参考一下宽高之类的，然后就发现了一个小问题，它里面的好多代码我都看不懂啊，什么:host，什么 –ntp-theme-shortcut-background-color: rgba(241, 243, 244, 1); 之类的。

遇事不要慌，我们先Ctrl+U看一下源代码，发现谷歌的源代码很简单，因此我觉得它应该是通过JavaScript渲染来维护页面的。然后这个:host是什么还不清楚，只好请出百度了，一查才知道，原来这是一个伪类。

CSS 伪类函数 :host() 选择包含使用这段CSS的Shadow DOM的影子宿主（这样就可以从Shadow DOM中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。 最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是:host-context()的作用。

简单的举一个例子:

/* 选择阴影根元素，仅当它与选择器参数匹配 */
:host(.special-custom-element) {
  font-weight: bold;
}

通过:host来为选定的元素提供特殊的效果，这就是:host的用法了。最后，简单的看一下我写的Google页面吧。

写的很拉跨，哈哈，不过确实有所收获。如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。