样式

使用css函数定义静态样式

官方文档说这种方式对于性能是最优的。

基本使用

@customElement("base-app")
export class BaseApp extends LitElement {
  @property()
  name: string = "Lit";

  //定义样式
  static styles?: CSSResultGroup | undefined = css`
    div {
      color: blue;
      font-size: 30px;
    }
  `;

  // 渲染组件
  render() {
    return html` 
你好，${this.name}
 `;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用表达式

为了防止潜在的恶意代码, css 标签只允许嵌套表达式本身 css 字符串或数字标记。

//颜色，注意要是写在类里面不能用const定义
const aColor = css`red`;

@customElement("base-app")
export class BaseApp extends LitElement {
  @property()
  name: string = "Lit";

  //定义样式
  static styles?: CSSResultGroup | undefined = css`
    div {
      color: ${aColor};
      font-size: 30px;
    }
  `;

  // 渲染组件
  render() {
    return html` 
你好，${this.name}
 `;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

样式继承
因为组件是基于类的，因此可以继承父组件的样式

父组件：SuperElement

export class SuperElement extends LitElement {
  static styles = css`
    div {
      border: 1px solid gray;
      padding: 8px;
    }
  ` as CSSResultGroup;
  protected render() {
    return html`
      
Content
    `;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

子组件：MyElement

import {SuperElement} from './super-element.js';

@customElement('my-element')
export class MyElement extends SuperElement {
  static styles = [
    SuperElement.styles,
    css`div {
      color: red;
    }`
  ];
}
1
2
3
4
5
6
7
8
9
10
11

样式共享
可以通过创建一个模块组件之间共享样式出口标记样式:

my-style.ts

import { css } from "lit";

export const divStyle = css`
  div {
    color: blue;
    font-size: 30px;
  }
`;
1
2
3
4
5
6
7
8

组件

//引入样式
import { divStyle } from "./view/my-style";
@customElement("base-app")
export class BaseApp extends LitElement {
  @property()
  name: string = "Lit";

  //定义样式
  static styles?: CSSResultGroup | undefined = [divStyle];

  // 渲染组件
  render() {
    return html` 
你好，${this.name}
 `;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

影子dom设计

基于阴影dom后，除了样式继承，样式只会在组件内生效。您可以使用特殊的选择器设置组件本身的样式:host ，要为宿主元素创建默认样式，请使用 :hostCSS 伪类和:host()CSS 伪类函数。

@customElement("base-app")
export class BaseApp extends LitElement {
  @property()
  name: string = "Lit";

  //定义样式
  static styles?: CSSResultGroup | undefined = css`
    :host {
      color: blue;
      border: 1px solid red;
    }
    :host(#app) {
      font-size: 30px;
    }
    div {
      font-family: "楷体";
    }
  `;

  // 渲染组件
  protected render() {
    return html` 
你好，${this.name}
 `;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意点：

• :hostCSS 和 :host()CSS 是作用鱼组件本身的，而不是组件内的html元素，从上图中就可以看出来
• :hostCSS 和 :host()CSS 中对于width 、background-color 这样的属性，你必须指定display: block; 才可以生效

为插槽设置样式

关于插槽，如果用个vue的话，那一定十分熟悉。使用元素充当阴影树中的占位符，其中显示了宿主元素的子元素。
使用::slotted()CSS 伪元素通过 选择包含在模板中的子元素。

• ::slotted(*)匹配所有开槽元素。
• ::slotted(p)匹配开槽的段落。

<base-app id="app">
 <p>这么默认插槽内容</p>
 <span slot="a">这是具名插槽内容 </span>
</base-app>

@customElement("base-app")
export class BaseApp extends LitElement {
  @property()
  name: string = "Lit";

  //定义样式
  static styles?: CSSResultGroup | undefined = css`
    ::slotted(*) {
      font-size: 30px;
    }
    ::slotted(p) {
      color: blue;
    }
    ::slotted(span) {
      color: red;
    }
  `;

  // 渲染组件
  protected render() {
    return html`
      

        默认插槽：
        
        

        具名插槽：
        
      
    `;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在模板中定义作用域样式

我们建议使用静态styles类字段以获得最佳性能。但是，有时您可能希望在 Lit 模板中定义样式。在模板中添加作用域样式有两种方法：

• 使用
  你好，${this.name}
  `; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

  

  表达式和样式元素
  评估元素内的表达式`; return html`${this.red ? redStyle : ''}` }

  • 1
  • 2
  • 3
  • 4
  • 5

  动态类和样式

  使样式动态化的一种方法是将表达式添加到模板中的class or style属性。
  Lit 提供了两个指令，classMap和styleMap，以方便地在 HTML 模板中应用类和样式。

  引入classMap和/或styleMap：

  import { classMap } from 'lit/directives/class-map.js';
  import { styleMap } from 'lit/directives/style-map.js';
  1
  2

  使用

  @customElement("base-app")
  export class BaseApp extends LitElement {
    @property()
    name: string = "Lit";
  
    static styles?: CSSResultGroup | undefined = css`
      .demo {
        color: blue;
      }
    `;
  
    @property({ type: Object })
    myClass = { demo: true };
  
    @property({ type: Object })
    myStyles = {
      fontSize: `20px`,
    };
  
    // 渲染组件
    protected render() {
      return html`
        
  ${classMap(this.myClass)} style=${styleMap(this.myStyles)}>
          你好，${this.name}
        
      `;
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28

  

  注意点：

  • 对于类，通过设置true 或 false 来表示该类是否使用
  • 对于样式，在这里这就是一个普通的对象，要使用对象的写法，而不是使用css函数时直接写相应的样式

  主题化

  通过结合使用CSS 继承和CSS 变量和自定义属性，可以轻松创建主题元素。通过应用 css 选择器来自定义 CSS 自定义属性，可以直接应用基于树和每个实例的主题。

  默认样式：

  export class BaseApp extends LitElement {
    @property()
    name: string = "Lit";
  
    static styles?: CSSResultGroup | undefined = css`
      :host {
        display: block;
        width: 300px;
        height: 100px;
        border: 1px solid red;
        color: var(--text-color, blue);
      }
    `;
  
    // 渲染组件
    protected render() {
      return html` 
  你好，${this.name}
   `;
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

  
  自定义样式

  <body>
    <style>
      base-app {
        --text-color: gray;
      }
    </style>
    <base-app></base-app>
  </body>
  1
  2
  3
  4
  5
  6
  7
  8

  
  css继承
  CSS 继承允许父元素和宿主元素将某些 CSS 属性传播给它们的后代。

  并非所有 CSS 属性都继承。继承的 CSS 属性包括：

  • color
  • font-family和其他font-*属性
  • 所有 CSS 自定义属性 ( --*)

  css自定义属性
  这里不介绍了，具体内容可以看：CSS var() 函数