Append Styles — Light DOM & Mobile-Ready Components

好，同学们，咱们今天来看看第三方组件的样式，特别是轻量级DOM和阴影DOM的区别。你会发现，处理轻量级DOM的样式，比阴影DOM简单得多。 为什么呢？因为没有阴影边界来阻止样式继承。在轻量级DOM里，标准的CSS类直接就能生效，就像咱们平时写网页一样。你可以直接用普通的.css文件，样式自然就会全局应用到组件内部。如果你想把样式限制在这个组件里，不影响到外面，也可以用加了.scoped.css后缀的样式文件，这样就是组件作用域的样式，只会对当前组件内的元素起作用。 接下来，我们快速总结一下，在不同场景下，组件样式的处理方式。 第一种场景，开放的 shadow DOM。这种情况下，你可以用CSS自定义属性，也就是变量，从外部穿透进去改变组件内部样式；还能用:host选择器调整组件本身的宿主元素。如果组件内部暴露了一些用::part定义的部件，你也能从外部定制它们。 第二种场景，封闭的阴影 DOM。这里就限制更多了，因为没有暴露内部结构，你只能用CSS自定义属性和:host选择器，无法直接改动组件内部的元素。 第三种就是咱们刚说的轻量级DOM，也就是light DOM。最灵活，你直接用标准CSS，配合普通类名和作用域样式表，随心所欲地写样式。 最后，再提一句移动就绪的组件。LWC天生就支持桌面和移动设备，但移动设备有些不同的限制和功能，不仅是屏幕大小的问题。如果你要深入移动开发，可以去看专门的《移动和离线开发人员指南》，里面详细讲了怎么用闪电移动功能模块来构建移动应用。 好了，关于轻量级DOM样式和移动适配的概述就到这儿，大家有问题吗？