CSS+HTML

相信我们很多同学都经常会使用到 Node（节点）和 Element（节点）的概念，那么这两者到底有何区别，不知道有多少人能够答得上来这个问题？

今天我们通过使用具名 Slots 在 Templates 中占位，然后再在自定义元素中给 Slots 传值，提高自定义元素的灵活性。

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

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

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

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

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

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

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

Web Components 标准非常重要的一个特性是，它使开发者能够将 HTML 页面的功能封装为 custom elements，而往常，开发者不得不写一大堆冗长、深层嵌套的标签来实现。

这篇文章记录一下 Windows 和 Linux 上安装 TTF 格式字体文件的方法步骤，算是对项目字体适配解决方案的补充方案……

字体文件不止有 TTF 格式，常见的字体格式还有 OTF、WOFF 和 WOFF2 等，今天就来总结一下它们几个的相关概念。

日常开发中，一些特定的场景下你的处理方法可能并不是很理想，往往这时借助一些设计模式可以让你优雅而高效的实现这些逻辑，下面就介绍一些虽然不是最全的但一定是最常用的设计模式。

由于国产化进程的不断推进，冒出了不少基于 Linux 的国产操作系统，这就导致我们平时在 windows 上使用得好好的字体，在这些国产操作系统上就失效了，其原因是这些操作系统上没有安装对应的字体。

CSS 变量（自定义属性）在某个地方存储一个值，然后在其他许多地方引用它，另一个好处是语义化的标识。

CSS 是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。 希望我们都能够通过 CSS 为自己绘制色彩缤纷的前端生涯！

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。