Lightning Web Components 組件樣式（四）

要將樣式與組件進行綁定，須要建立一個同名的樣式文件，這樣樣式將會自動應用到組件
在組件中定義的樣式的做用域是屬於組件的，這樣容許組件能夠在不一樣的上下文中能夠複用，
能夠阻止其餘組件的樣式的複寫

css 做用域例子

• 重要說明
  一個組件的文件夾和文件名是駱駝的狀況下，myComponent，myComponent.html，和myComponent.css。
  在HTML標記中，camelCase映射到kebab-case。當組件呈現時，<template>標記將替換爲標記包含組件的
  命名空間
• 一個簡單demo
  

  demo 說明，包含了兩個組件，cssParent 以及cssChild 每一個組件包含一個<p>標籤，cssParent.css 樣式定義xx-large p
  樣式，樣式只應用到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