CSS gốc so với máy chủ

Mẫu của thành phần của bạn được hiển thị ở gốc bóng của nó. Các kiểu bạn thêm vào thành phần của mình sẽ tự động nằm trong phạm vi gốc bóng tối và chỉ ảnh hưởng đến các phần tử trong gốc bóng tối của thành phần

Shadow DOM cung cấp khả năng đóng gói mạnh mẽ để tạo kiểu. Nếu Lit không sử dụng Shadow DOM, bạn sẽ phải cực kỳ cẩn thận để không vô tình tạo kiểu cho các thành phần bên ngoài thành phần của mình, kể cả tổ tiên hoặc thành phần con của thành phần đó. Điều này có thể liên quan đến việc viết dài, rườm rà để sử dụng tên lớp. Bằng cách sử dụng Shadow DOM, Lit đảm bảo bất kỳ bộ chọn nào bạn viết chỉ áp dụng cho các phần tử trong gốc bóng của thành phần Lit của bạn

Thêm kiểu vào thành phần của bạn

Bạn xác định các kiểu có phạm vi trong trường lớp

static styles = [ css`...`, css`...`];
12 tĩnh bằng cách sử dụng hàm 
static styles = [ css`...`, css`...`];
13 theo nghĩa đen của mẫu được gắn thẻ. Xác định phong cách theo cách này dẫn đến hiệu suất tối ưu nhất
Các kiểu bạn thêm vào thành phần của mình được xác định phạm vi bằng cách sử dụng DOM bóng. Để biết tổng quan nhanh, hãy xem
Giá trị của trường lớp 
static styles = [ css`...`, css`...`];
12 tĩnh có thể là
Một mẫu được gắn thẻ duy nhất theo nghĩa đen
static styles = css`...`;
Một mảng các chữ mẫu được gắn thẻ
static styles = [ css`...`, css`...`];
Trường lớp 
static styles = [ css`...`, css`...`];
12 tĩnh hầu như luôn là cách tốt nhất để thêm kiểu vào thành phần của bạn, nhưng có một số trường hợp sử dụng mà bạn không thể xử lý theo cách này—ví dụ: tùy chỉnh kiểu cho mỗi phiên bản. Để biết các cách khác để thêm kiểu, hãy xem
Sử dụng biểu thức trong kiểu tĩnh
Kiểu tĩnh áp dụng cho tất cả các phiên bản của một thành phần. Mọi biểu thức trong CSS đều được đánh giá một lần, sau đó được sử dụng lại cho tất cả các phiên bản
Để tùy chỉnh kiểu dựa trên cây hoặc theo trường hợp, hãy sử dụng các thuộc tính tùy chỉnh CSS để cho phép các phần tử được
Để ngăn các thành phần Lit đánh giá mã độc hại tiềm ẩn, thẻ 
static styles = [ css`...`, css`...`];
13 chỉ cho phép các biểu thức lồng nhau chính là các chuỗi hoặc số được gắn thẻ 
static styles = [ css`...`, css`...`];
13
const mainColor = css`red`;
...
static styles = css`
  div { color: ${mainColor} }
`;
Hạn chế này tồn tại để bảo vệ các ứng dụng khỏi các lỗ hổng bảo mật theo đó các kiểu độc hại hoặc thậm chí mã độc có thể được đưa vào từ các nguồn không đáng tin cậy như tham số URL hoặc giá trị cơ sở dữ liệu
Nếu bạn phải sử dụng một biểu thức ở dạng ký tự 
static styles = [ css`...`, css`...`];
13 mà bản thân nó không phải là một ký tự 
static styles = [ css`...`, css`...`];
13 và bạn tin chắc rằng biểu thức đó là từ một nguồn hoàn toàn đáng tin cậy, chẳng hạn như một hằng số được xác định trong mã của riêng bạn, thì bạn có thể bọc biểu thức đó bằng ký tự 
static styles = [ css`...`, css`...`];
20 
const mainColor = 'red';
...
static styles = css`
static styles = [ css`...`, css`...`];
0
`;
Chỉ sử dụng thẻ 
static styles = [ css`...`, css`...`];
20 với đầu vào đáng tin cậy. Chèn CSS không được làm sạch là một rủi ro bảo mật. Ví dụ: CSS độc hại có thể "gọi điện về nhà" bằng cách thêm URL hình ảnh trỏ đến máy chủ của bên thứ ba
Kế thừa style từ superclass
Sử dụng một mảng các mẫu chữ được gắn thẻ, một thành phần có thể kế thừa các kiểu từ một lớp cha và thêm các kiểu riêng của nó
Bạn cũng có thể sử dụng 
static styles = [ css`...`, css`...`];
22 để tham chiếu thuộc tính kiểu của siêu lớp trong JavaScript. Nếu bạn đang sử dụng TypeScript, chúng tôi khuyên bạn nên tránh sử dụng 
static styles = [ css`...`, css`...`];
22 vì trình biên dịch không phải lúc nào cũng chuyển đổi chính xác. Tham chiếu rõ ràng đến lớp cha, như trong ví dụ, sẽ tránh được vấn đề này



Khi viết các thành phần dự định được phân lớp trong TypeScript, trường 
static styles = [ css`...`, css`...`];
24 phải được nhập rõ ràng là 
static styles = [ css`...`, css`...`];
25 để cho phép người dùng linh hoạt ghi đè lên 
static styles = [ css`...`, css`...`];
12 bằng một mảng
static styles = [ css`...`, css`...`];
2
static styles = [ css`...`, css`...`];
3
static styles = [ css`...`, css`...`];
4
Chia sẻ phong cách
Bạn có thể chia sẻ các kiểu giữa các thành phần bằng cách tạo một mô-đun xuất các kiểu được gắn thẻ
static styles = [ css`...`, css`...`];
5
static styles = [ css`...`, css`...`];
6_______0_______7_______0_______8
static styles = [ css`...`, css`...`];
9
const mainColor = css`red`;
0
const mainColor = css`red`;
1
const mainColor = css`red`;
2
Sau đó, phần tử của bạn có thể nhập các kiểu và thêm chúng vào trường lớp 
static styles = [ css`...`, css`...`];
12 tĩnh của nó
const mainColor = css`red`;
3
const mainColor = css`red`;
4
const mainColor = css`red`;
5_______8_______6_______8_______7
const mainColor = css`red`;
8
const mainColor = css`red`;
9
...
0
...
1
...
2
...
3
Sử dụng thoát unicode theo kiểu
Trình tự thoát unicode của CSS là dấu gạch chéo ngược theo sau bởi bốn hoặc sáu chữ số hex. ví dụ: 
static styles = [ css`...`, css`...`];
28 cho ký tự dấu đầu dòng. Điều này tương tự với định dạng của chuỗi thoát bát phân không được dùng nữa của JavaScript, do đó, việc sử dụng các chuỗi này trong mẫu chữ được gắn thẻ 
static styles = [ css`...`, css`...`];
13 sẽ gây ra lỗi
Có hai cách giải quyết để thêm lối thoát unicode vào kiểu của bạn
Thêm dấu gạch chéo ngược thứ hai (ví dụ: 
static styles = [ css`...`, css`...`];
30)
Sử dụng chuỗi thoát JavaScript, bắt đầu bằng 
static styles = [ css`...`, css`...`];
31 (ví dụ: 
static styles = [ css`...`, css`...`];
32)
static styles = [ css`...`, css`...`];
33
Tổng quan về kiểu dáng Shadow DOM
Phần này cung cấp một cái nhìn tổng quan ngắn gọn về kiểu dáng DOM bóng tối
Các kiểu bạn thêm vào một thành phần có thể ảnh hưởng
(mẫu kết xuất của thành phần của bạn)
.
.
Tạo kiểu cho cây bóng tối
Theo mặc định, các mẫu ánh sáng được hiển thị thành cây bóng tối. Các kiểu nằm trong cây bóng của một phần tử không ảnh hưởng đến tài liệu chính hoặc các cây bóng khác. Tương tự, ngoại trừ , các kiểu cấp độ tài liệu không ảnh hưởng đến nội dung của cây bóng tối
Khi bạn sử dụng bộ chọn CSS tiêu chuẩn, chúng chỉ khớp với các thành phần trong cây bóng của thành phần của bạn. Điều này có nghĩa là bạn có thể thường xuyên sử dụng các bộ chọn rất đơn giản vì bạn không phải lo lắng về việc chúng vô tình tạo kiểu cho các phần khác của trang; . 
static styles = [ css`...`, css`...`];
34, 
static styles = [ css`...`, css`...`];
35, hoặc 
static styles = [ css`...`, css`...`];
36
Tạo kiểu cho chính thành phần đó
Bạn có thể tự tạo kiểu cho thành phần đó bằng cách sử dụng bộ chọn 
static styles = [ css`...`, css`...`];
37 đặc biệt. (Phần tử sở hữu hoặc "host" cây bóng tối được gọi là phần tử chủ. )
Để tạo kiểu mặc định cho phần tử máy chủ, hãy sử dụng hàm lớp giả CSS 
static styles = [ css`...`, css`...`];
37 và hàm lớp giả lớp 
static styles = [ css`...`, css`...`];
39 CSS
static styles = [ css`...`, css`...`];
37 chọn phần tử máy chủ
static styles = [ css`...`, css`...`];
41 chọn phần tử máy chủ, nhưng chỉ khi phần tử máy chủ khớp với bộ chọn
Lưu ý rằng phần tử máy chủ cũng có thể bị ảnh hưởng bởi các kiểu từ bên ngoài cây bóng tối, vì vậy bạn nên coi các kiểu bạn đặt trong quy tắc 
static styles = [ css`...`, css`...`];
37 và 
static styles = [ css`...`, css`...`];
39 là kiểu mặc định mà người dùng có thể ghi đè. Ví dụ
...
8
...
9
...
3
Tạo kiểu cho con của thành phần
Thành phần của bạn có thể chấp nhận phần tử con (chẳng hạn như phần tử 
static styles = [ css`...`, css`...`];
44 có thể có 
static styles = [ css`...`, css`...`];
45 phần tử con). Để hiển thị phần tử con, mẫu của bạn cần bao gồm một hoặc nhiều phần tử 
static styles = [ css`...`, css`...`];
46, như được mô tả trong
Phần tử 
static styles = [ css`...`, css`...`];
46 hoạt động như một trình giữ chỗ trong cây bóng nơi hiển thị các phần tử con của phần tử máy chủ



Sử dụng phần tử giả CSS 
static styles = [ css`...`, css`...`];
48 để chọn phần tử con được đưa vào mẫu của bạn thông qua 
static styles = [ css`...`, css`...`];
46s
static styles = [ css`...`, css`...`];
50 khớp với tất cả các phần tử có rãnh
static styles = [ css`...`, css`...`];
51 phù hợp với các đoạn văn có rãnh
static styles = [ css`...`, css`...`];
52 khớp với các phần tử có rãnh trong đó 
static styles = [ css`...`, css`...`];
46 là phần tử con của phần tử đoạn văn
Lưu ý rằng chỉ những phần tử con có rãnh trực tiếp mới có thể được tạo kiểu bằng 
static styles = [ css`...`, css`...`];
48
static styles = css`
1
static styles = css`
2
static styles = css`
3
const mainColor = css`red`;
4_______10_______5
static styles = css`
6
static styles = css`
3
Ngoài ra, trẻ em có thể được tạo kiểu từ bên ngoài cây bóng tối, vì vậy bạn nên coi các kiểu 
static styles = [ css`...`, css`...`];
48 của mình là kiểu mặc định có thể bị ghi đè
static styles = css`
8
static styles = css`
9
...
3
Các hạn chế trong ShadyCSS polyfill xung quanh nội dung có rãnh. Xem chi tiết về cách sử dụng cú pháp 
static styles = [ css`...`, css`...`];
48 theo cách thân thiện với polyfill
Xác định kiểu phạm vi trong mẫu
Chúng tôi khuyên bạn nên sử dụng để có hiệu suất tối ưu. Tuy nhiên, đôi khi bạn có thể muốn xác định kiểu trong mẫu Lit. Có hai cách để thêm các kiểu có phạm vi trong mẫu
Thêm phong cách bằng cách sử dụng một
Thêm kiểu bằng cách sử dụng (không được khuyến nghị)
Mỗi kỹ thuật này đều có những ưu điểm và nhược điểm riêng
Trong một yếu tố phong cách
Thông thường, các kiểu được đặt trong ; . Đôi khi, bạn có thể cần tùy chỉnh kiểu cho mỗi phiên bản. Đối với điều này, chúng tôi khuyên bạn nên sử dụng các thuộc tính CSS để tạo. Ngoài ra, bạn cũng có thể bao gồm các phần tử 
static styles = [ css`...`, css`...`];
58 trong mẫu Lit. Chúng được cập nhật cho mỗi trường hợp
  div { color: ${mainColor} }
1
  div { color: ${mainColor} }
2
  div { color: ${mainColor} }
3
  div { color: ${mainColor} }
4
  div { color: ${mainColor} }
5
  div { color: ${mainColor} }
6
  div { color: ${mainColor} }
7
...
3
Các hạn chế trong ShadyCSS polyfill xung quanh mỗi kiểu dáng phiên bản. Kiểu dáng cho mỗi phiên bản không được hỗ trợ bằng cách sử dụng ShadyCSS polyfill. Xem chi tiết
Các yếu tố biểu thức và phong cách
Việc sử dụng các biểu thức bên trong các phần tử kiểu có một số hạn chế quan trọng và các vấn đề về hiệu suất
  div { color: ${mainColor} }
1
  div { color: ${mainColor} }
2
  div { color: ${mainColor} }
3
`;
2
`;
3
`;
4
`;
5
`;
6
  div { color: ${mainColor} }
6
  div { color: ${mainColor} }
7
...
3
Các hạn chế trong ShadyCSS polyfill xung quanh các biểu thức. Các biểu thức trong phần tử 
static styles = [ css`...`, css`...`];
58 sẽ không cập nhật mỗi phiên bản trong ShadyCSS, do những hạn chế của ShadyCSS polyfill. Ngoài ra, các nút 
static styles = [ css`...`, css`...`];
58 có thể không được chuyển dưới dạng giá trị biểu thức khi sử dụng ShadyCSS polyfill. Xem để biết thêm thông tin
Việc đánh giá một biểu thức bên trong phần tử 
static styles = [ css`...`, css`...`];
58 cực kỳ kém hiệu quả. Khi bất kỳ văn bản nào bên trong phần tử 
static styles = [ css`...`, css`...`];
58 thay đổi, trình duyệt phải phân tích cú pháp lại toàn bộ phần tử 
static styles = [ css`...`, css`...`];
58, dẫn đến công việc không cần thiết
Để giảm thiểu chi phí này, hãy tách các kiểu yêu cầu đánh giá theo phiên bản khỏi những kiểu không yêu cầu
const mainColor = 'red';
0
const mainColor = 'red';
1
const mainColor = 'red';
2
const mainColor = 'red';
3
const mainColor = css`red`;
4
Nhập biểu định kiểu bên ngoài (không khuyến nghị)
Mặc dù bạn có thể bao gồm một biểu định kiểu bên ngoài trong mẫu của mình với một 
static styles = [ css`...`, css`...`];
67, nhưng chúng tôi không khuyến nghị phương pháp này. Thay vào đó, các kiểu nên được đặt trong
Cảnh báo biểu định kiểu bên ngoài



Không hỗ trợ biểu định kiểu bên ngoài
Các kiểu bên ngoài có thể gây ra hiện tượng nhấp nháy nội dung không theo kiểu (FOUC) trong khi chúng tải
URL trong thuộc tính 
static styles = [ css`...`, css`...`];
69 có liên quan đến tài liệu chính. Điều này không sao nếu bạn đang tạo ứng dụng và URL nội dung của bạn được nhiều người biết đến, nhưng tránh sử dụng biểu định kiểu bên ngoài khi tạo phần tử có thể tái sử dụng
Các lớp và kiểu động
Một cách để tạo kiểu động là thêm biểu thức vào thuộc tính 
static styles = [ css`...`, css`...`];
70 hoặc 
static styles = [ css`...`, css`...`];
71 trong mẫu của bạn
Lit cung cấp hai chỉ thị, 
static styles = [ css`...`, css`...`];
72 và 
static styles = [ css`...`, css`...`];
73, để áp dụng các lớp và kiểu trong các mẫu HTML một cách thuận tiện
Để biết thêm thông tin về các chỉ thị này và các chỉ thị khác, hãy xem tài liệu về các chỉ thị tích hợp
Để sử dụng 
static styles = [ css`...`, css`...`];
73 và/hoặc 
static styles = [ css`...`, css`...`];
72
Nhập khẩu 
static styles = [ css`...`, css`...`];
72 và/hoặc 
static styles = [ css`...`, css`...`];
73
const mainColor = 'red';
5
const mainColor = 'red';
6
Sử dụng 
static styles = [ css`...`, css`...`];
72 và/hoặc 
static styles = [ css`...`, css`...`];
73 trong mẫu phần tử của bạn
Xem và để biết thêm thông tin
theo chủ đề
Bằng cách sử dụng và cùng nhau, thật dễ dàng để tạo các yếu tố có thể sử dụng được. Bằng cách áp dụng bộ chọn css để tùy chỉnh các thuộc tính tùy chỉnh của CSS, việc áp dụng chủ đề dựa trên cây và theo trường hợp là rất dễ dàng. Đây là một ví dụ
kế thừa CSS
Tính kế thừa CSS cho phép các phần tử cha và máy chủ truyền bá một số thuộc tính CSS nhất định cho con cháu của chúng
Không phải tất cả các thuộc tính CSS đều kế thừa. Các thuộc tính CSS kế thừa bao gồm
static styles = [ css`...`, css`...`];
80
static styles = [ css`...`, css`...`];
81 và các tài sản 
static styles = [ css`...`, css`...`];
82 khác
Tất cả thuộc tính tùy chỉnh CSS (
static styles = [ css`...`, css`...`];
83)
Xem Kế thừa CSS trên MDN để biết thêm thông tin
Bạn có thể sử dụng tính năng kế thừa CSS để đặt kiểu trên phần tử tổ tiên được kế thừa bởi phần tử con của nó
const mainColor = 'red';
7
const mainColor = 'red';
8
const mainColor = 'red';
9
...
3
...
1
static styles = css`
5
...
3
...
4
static styles = css`
3
Thuộc tính tùy chỉnh CSS
Tất cả các thuộc tính tùy chỉnh CSS (
static styles = [ css`...`, css`...`];
84) kế thừa. Bạn có thể sử dụng điều này để làm cho các kiểu thành phần của bạn có thể định cấu hình từ bên ngoài
Thành phần sau đặt màu nền của nó thành một biến CSS. Biến CSS sử dụng giá trị của 
static styles = [ css`...`, css`...`];
85 nếu nó được đặt bởi bộ chọn khớp với tổ tiên trong cây DOM và nếu không thì giá trị mặc định là 
static styles = [ css`...`, css`...`];
86
static styles = [ css`...`, css`...`];
87
Người dùng của thành phần này có thể đặt giá trị của 
static styles = [ css`...`, css`...`];
85, sử dụng thẻ 
static styles = [ css`...`, css`...`];
89 làm bộ chọn CSS
 

			
Gốc CSS là gì?
			
Các. lớp giả CSS gốc  khớp với phần tử gốc của cây đại diện cho tài liệu . Trong HTML,. root đại diện cho phần tử 
		
			
Máy chủ CSS là gì?
			
Các. lớp giả CSS máy chủ  chọn máy chủ bóng của DOM bóng chứa CSS mà nó được sử dụng bên trong  — nói cách khác, điều này cho phép bạn chọn tùy chỉnh . Ghi chú. Điều này không có tác dụng khi được sử dụng bên ngoài DOM bóng. 
		
			
Tôi có thể có nhiều root trong CSS không?
			
Các. bộ chọn gốc đại diện cho thẻ  bạn có thể xử lý. root như bất kỳ bộ chọn chung nào -- nhiều bộ chọn trong mọi kết hợp hợp lệ . 
		
			
Máy chủ trong góc CSS là gì?
			
Mọi thành phần được liên kết trong một thành phần khớp với bộ chọn của thành phần đó.  Phần tử này, trong đó mẫu được hiển thị , được gọi là phần tử máy chủ. Các. bộ chọn lớp giả máy chủ có thể được sử dụng để tạo các kiểu nhắm mục tiêu vào chính phần tử máy chủ lưu trữ, thay vì nhắm mục tiêu các phần tử bên trong máy chủ lưu trữ.