编程三昧

理论知识基本上够用了，从现在开始我们需要将理论运用到实践中，让理论为实践服务，使用 Web Components 的相关知识来实现 MyCard 的制作。

-`:host` 范围最大，匹配所有的自定义元素实例； -`:host()` 只选择自身包含特定选择器的自定义元素； - `:host-context()` 选择拥有特定选择器父元素的自定义元素。

通过前面的学习，对自定义组件的相关概念和知识点也有了一定了解，今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法。

打铁还需自身硬，别看别人的实现方式有多高大上，其实都是基础知识的一些合理组合使用的结果而已，只要你基础够好，那即使面对一段简简单单的代码也能玩出不一样的花样！

为了使 Custom Elements 在使用上更加灵活，它也有”生命周期“回调函数，可以让开发者定义好在组件不同生命时期可以被执行的方法。

以上就是我对 Slots 相关知识的一个总结，目前能想到的就这些，肯定不全面，希望大家能够指正补充！

Templates 可以将一些页面内容事先封装并且保存在 HTML 页面上，且不进行渲染，随后可以使用 JS 来操作 Templates。

影子当然都是藏在暗处，不容易让人发现的，就像文章开头提到的那些默认元素，如果不通过设置，我们表面上看到的就是简单的一个标签而已。

自定义元素分为两类：Autonomous custom elements（自主定制元素）和Customized built-in elements（自定义内置元素），这两者在使用上到底有什么区别？