CSS 그림자 부품으로 그림자 돔의 스타일

Safari 13.1은 CSS Shadow Parts에 대한 지원을 도입했습니다. 즉 ::part() 선택기는 이제 Chrome, Edge, Opera, Safari 및 Firefox에 의해 지원됩니다. 이 기사는 그 용도를 탐색하고 먼저 Shadow Dom의 포장 기능을 검토합니다.

그림자 돔 포장의 장점

Giffgaff에는 여러 가지 방법으로 다른 사람들이 작성한 많은 CSS 코드가 있습니다. 이것이 어떤 문제가 가져올 수 있는지 봅시다.

명명 충돌

클래스 이름 충돌은 CSS에서 발생하기 쉽습니다. 개발자는 .price 라는 클래스 이름을 만들 수 있습니다. 다른 개발자 (아마도 같은 사람조차도)는 알지 못하고 같은 클래스 이름을 사용할 수 있습니다.

CSS는 오류를 제기하지 않습니다. 이제이 클래스의 모든 HTML 요소는 완전히 다른 두 가지에 대한 스타일을받습니다.

Shadow Dom 은이 문제를 해결합니다. 감정 및 스타일 컴포넌트와 같은 CSS-in-JS 라이브러리는 .bwzfXH 와 같은 임의의 클래스 이름을 생성 하여이 문제를 다양한 방식으로 해결합니다. 이것은 확실히 갈등을 피하는 데 도움이됩니다! 그러나 CSS-in-JS는 다른 방식으로 구성 요소를 깨뜨리는 것을 막지 않습니다. 예를 들어……

기본 스타일 및 CSS 재설정

HTML 요소 선택기를 사용할 수 있습니다 (예 :<button></button> 그리고<div> ) 스타일을 적용하십시오. 이 스타일은 구성 요소를 깨뜨릴 수 있습니다. Shadow Dom은 (거의) 완전히 캡슐화 된 유일한 메커니즘입니다. 당신은 각 구성 요소가 캡슐화되어 있기 때문에 구성 요소가 <code>!important 코드베이스에서도 일관성이 보일 것임을 확신 할 수 있습니다.

 /* 이것은 그림자 내부의 버튼에 영향을 미치지 않습니다.*/
버튼 {배경색 : 라임! 중요; }

나는 이런 식으로 요소를 스타일링하는 것이 좋은 관행이라고 생각하지 않지만 일어난다. 이런 일이 발생하더라도 이러한 스타일은 Shadow Dom에 영향을 미치지 않습니다.

색상, 글꼴 및 라인 높이와 같은 상속 가능한 스타일은 여전히 ​​Shadow Dom에서 상속되어 있음을 주목할 가치가 있습니다. 이를 방지하려면 all: initial 또는 가급적 all: revert .

HTML 요소에 직접 적용되는 CSS의 일반적인 예를 살펴 보겠습니다. Eric Meyer의 재설정 코드를 고려하십시오.

 HTML, Body, Div, Span, Applet, Object, Iframe,
H1, H2, H3, H4, H5, H6, P, Blockquote, Pre,
ABBR, 약어, 주소, 큰, 인용, 코드,
del, dfn, em, img, ins, kbd, q, s, samp,
소규모 파업 강한 하위 SUP TT var
b, u, i, 센터,
DL, DT, DD, OL, UL, Li,
필드 셋, 양식, 라벨, 전설,
테이블, 캡션, tfoot, tfoot, thead, tr, th, td,
기사, 제외, 캔버스, 세부 사항, 임베디드,
그림, 피상, 바닥 글, 헤더, HGROUP,
메뉴, NAV, 출력, 루비, 섹션, 요약,
시간, 마크, 오디오, 비디오 {
  여백 : 0;
  패딩 : 0;
  국경 : 0;
  글꼴 크기 : 100%;
  글꼴 : 상속;
  수직 정상 : 기준선;
}

사용중인 구성 요소가 사용자 에이전트의 기본 마진 및 패딩 값을 사용하는 경우 어떻게됩니까? 이 기본값이 실제로 지워짐에 따라이 재설정으로 인해 손상된 모습이 발생할 수 있습니다.

Shadow Dom은 이러한 문제를 피하는 방법입니다. Shadow Dom을 사용하면 구성 요소가 예상대로 렌더링 할 것이라고 확신 할 수 있습니다. 어떤 코드베이스가 들어가든간에 구성 요소에만 사용되는 코드는 부주의하게 다른 것에 영향을 미치지 않습니다. Shadow Dom은 다른 방식으로 달성 할 수없는 캡슐화 수준을 제공합니다.

포장은 훌륭하지만 구성 요소도 테마 및 사용자 정의 할 수 있기를 원합니다. ::part 선택기는 훨씬 쉽게 만듭니다.

:: part ()

지금까지 CSS가 외부 Shadow Dom에서 사용자 정의 요소 스타일을 수정할 수있는 유일한 방법은 CSS 사용자 정의 속성을 사용하는 것입니다. 엄격한 디자인 시스템에서는 제한된 변경 사항 만 허용하는 것만 허용하려고합니다. 구성 요소가보다 일반적인 경우 문제가 발생할 수 있습니다. 스타일을 제공하려는 각 CSS 속성을 정의하려면 사용자 정의 속성을 사용해야합니다. 그것은 단지 매우 복잡하게 들립니다.

의사 클래스 (예 :hover )를 기반으로 다양한 방식으로 구성 요소를 스타일링하려면 상황이 더욱 복잡해집니다. 기본적으로, 우리는 많은 사용자 정의 속성으로 끝납니다. Ionic (오픈 소스 웹 구성 요소 세트)의 예를 살펴 보겠습니다. 이온 성 버튼 구성 요소에 정의 된 모든 사용자 정의 속성을 살펴보십시오.

자유롭게 확인하십시오.

23 개의 사용자 정의 속성을 계산했습니다. 말할 것도없이, 이것은 이상적이지 않습니다.

다음은 ::part() to Style 요소를 사용하는 예입니다.

이 예에서는 방금 색상, 테두리 및 배경색 특성을 변경했지만 정의 된 사용자 정의 속성에 의해 제한되지 않고 원하는 속성을 사용할 수 있습니다. :hover 및 :focus 구성 요소의 다른 상태를 스타일링하는 데 중점을 둔 의사 클래스도 사용할 수 있습니다.

이 버튼 예제에서는 전체 구성 요소가 스타일 설정에 노출되지만 웹 구성 요소에 여러 HTML 요소가 포함 된 경우 구성 요소의 선택된 부분 만이 스타일 설정에 노출 될 수 있으므로 이름 ::part . 이렇게하면 구성 요소의 사용자가 그림자 트리 내의 임의의 요소를 스타일링하는 것을 방지합니다. 구성 요소 저자는 명시 적으로 공개하고자하는 구성 요소를 공개 할 책임이 있습니다. 구성 요소의 다른 부분은 시각적 일관성을 유지하거나 사용자 정의 속성을 사용하여 사용자 정의 성을 덜 달성 할 수 있습니다.

그렇다면 구성 요소에 대해 어떻게 설정합니까? 사용 방법 ::part 을 살펴 보겠습니다. 우리가하는 일은 우리가 노출하려는 요소에 part 속성을 추가하는 것입니다.

<div part="box"> ...</div>
<button>나를 클릭하십시오</button>

이 예에서는 전체 CSS 범위를 사용하여 div 사용자 정의 할 수 있습니다. CSS 속성을 변경할 수 있습니다. 그러나 버튼이 잠겨 있습니다. 구성 요소 저자를 제외하고는 시각적 효과를 변경할 수 없습니다.

HTML 요소가 여러 클래스 이름을 가질 수있는 것처럼 하나의 요소는 여러 part 이름을 가질 수 있습니다.

<div part="box thing"> ...</div>

이것이 우리가 얻는 것 ::part : 요소의 "부분"을 노출시킴으로써 다른 영역에서 보호하는 동안 웹 구성 요소를 사용하는 방법에 대한 유연성을 제공 할 수 있습니다. 디자인 시스템, 구성 요소 라이브러리 또는 기타 기타이든 CSS 그림자 부품이 주류가되었다는 사실은 또 다른 흥미로운 도구를 제공합니다.

위 내용은 CSS 그림자 부품으로 그림자 돔의 스타일 의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!