Lightning Web Components 组件样式（四）
要将样式与组件进行绑定，需要创建一个同名的样式文件，这样样式将会自动应用到组件
在组件中定义的样式的作用域是属于组件的，这样允许组件可以在不同的上下文中可以复用，
可以阻止其他组件的样式的复写
css 作用域例子
- 重要说明
一个组件的文件夹和文件名是骆驼的情况下，myComponent，myComponent.html，和myComponent.css。
在HTML标记中，camelCase映射到kebab-case。当组件呈现时，<template>标记将替换为标记包含组件的
命名空间 - 一个简单demo
demo 说明，包含了两个组件，
cssParent以及cssChild每个组件包含一个<p>标签，cssParent.css样式定义xx-largep
样式，样式只应用到parent p 标签，而不是在child 中的标签
cssParent.js
import { LightningElement } from 'lwc';
export default class CssParent extends LightningElement {}
cssParent.html
<template>
<p>To Do List</p>
<example-css-child></example-css-child>
</template>
cssParent.css
p {
font-size: xx-large;
}
cssChild.js
import { LightningElement } from 'lwc';
export default class CssChild extends LightningElement {}
cssChild.html
<template>
<p>To Do Item</p>
</template>
cssChild.css
/*
:host {
display: block;
background: whitesmoke;
}
*/
父组件应用样式到child 组件，这个可以通过元素样式的方式
/* cssParent.css */
p {
font-size: xx-large;
}
example-css-child {
display: block;
background: whitesmoke;
}
子组件样式的应用，可以通过:host 配置样式,以及类似parent 的样式配置
/* cssChild.css */
:host {
display: block;
background: whitesmoke;
}
同时对于组件我们可以添加<slot></slot> 方便的进行内容填充
css 的支持以及对于性能的影响
- 一些不支持的css 选择器
:host-context()
::slotted
不支持id 选择器 - 对于性能的影响
每个选择器都有自己作用域链，所以传递给的每个复合表达式:host()都会扩展到多个选择器中。这种转换增加了生成的CSS的大小和复杂性。
为了确保CSS封装，每个元素都有一个额外的属性，这也增加了渲染时间
参考资料
https://lwc.dev/guide/reference#component-bundles
https://lwc.dev/guide/composition#pass-markup-into-slots
