선언적 그림자 돔이 설명했다

선언적 섀도우 DOM을 사용하면 HTML에서 섀도우 DOM을 직접 정의 할 수 있으며, 성능을 향상시키는 HTML 구문 분석 중에 캡슐화 된 컨텐츠의 즉각적인 렌더링을 가능하게하여 렌더 블로킹 JavaScript 문제를 해결할 수 있습니다. 그러나 역동적 인 논리가 부족하고 스타일링 제약 조건을 범위로 만들며 현재 크롬 기반 브라우저로 제한되며 이전 브라우저에 JavaScript를 사용하는 폴백 전략이 있습니다.

선언적 Shadow Dom은 개발자가 JavaScript를 통해 필수적으로 만들기보다는 HTML에서 Shadow DOM 구조를 직접 정의 할 수있는 웹 플랫폼 기능입니다. 이는 서버 측 렌더링 (SSR) 및 웹 구성 요소의 성능 향상에 특히 유용합니다.

다이빙하기 전에 Shadow Dom이 무엇인지 간단히 기억해 봅시다. 마크 업, 스타일 및 동작을 캡슐화하여 나머지 페이지의 누출되거나 영향을받지 않도록하십시오. 전통적으로, 당신은 다음과 같은 JavaScript를 사용하여 Shadow Dom을 만듭니다.

 const shadow = element.attachshadow ({mode : 'open'});
Shadow.innerhtml = &#39;<p> 섀도 </p>&#39;;

그러나 페이지로드 후 클라이언트 측에서만 실행됩니다. 즉, 서버에서 구성 요소를 렌더링하는 경우 JavaScript가 실행될 때까지 Shadow DOM 구조를 사용할 수 없으므로 시각적 렌더링을 지연시키고 성능을 상하게합니다.

선언적 그림자 돔이 해결되는 것은 무엇입니까?

핵심 문제 선언 섀도우 DOM 주소는 웹 구성 요소의 렌더 블로킹 JavaScript 입니다. 전통적인 Shadow Dom을 사용하면 JavaScript가 실행될 때까지 캡슐화 된 컨텐츠를 볼 수 없습니다. 이것은 다음으로 이어진다.

• 무모한 콘텐츠 (Fouc)의 플래시
• 지연된 상호 작용
• 불쌍한 SEO (검색 엔진은 JS가 실행되기를 기다리지 않을 수 있음)

선언적 섀도우 Dom을 사용하면 특수 구문을 사용하여 HTML에서 Shadow Root를 직접 쓸 수 있으므로 브라우저는 JavaScript로드 전에도 캡슐화 된 컨텐츠를 즉시 구문 분석하고 렌더링 할 수 있습니다.

작동 방식 : 구문

선언적 섀도우 Dom은 새로운 shadowroot 정의 요소 <template> 소개합니다. 예는 다음과 같습니다.

 <내 구성 요소>
  <template shadowroot = "Open">
    <스타일>
      p {색상 : 파란색; }
    </스타일>
    <p> 이것은 즉시 Shadow Dom에서 렌더링됩니다. </p>
  </템플릿>
</my-component>

브라우저가 이것을 구문 분석하면 자동으로 :

1. shadowroot 에서 <template> 찾습니다
2. 부모에게 그림자 루트를 첨부합니다 ( <my-component> )
3. shadowroot 값을 기준으로 모드를 설정합니다 ( open 또는 closed )
4. 템플릿의 어린이를 그림자 뿌리로 옮깁니다

이 모든 것은 HTML 파싱 중에 발생합니다. JavaScript가 필요하지 않습니다.

참고 : 일반적으로 사용자 정의 요소 ( customElements.define('my-component', ...) )을 정의하려면 JavaScript가 필요하지만 시각적 구조는 이미 제자리에 있습니다.

사용 사례 및 혜택

1. 초기 렌더가 더 빠릅니다

Shadow 콘텐츠는 HTML에 있으므로 사용자는 스타일의 콘텐츠를 즉시 볼 수 있습니다. JS가 그림자 루트를 부착하기를 기다리지 않습니다.

2. 더 나은 SSR 지원

Next.js, Astro 또는 Sveltekit과 같은 프레임 워크는 HTML에 구운 Shadow Dom으로 완전히 렌더링 된 웹 구성 요소를 출력 할 수 있습니다. 수화가 아직 발생하지 않더라도 구성 요소가 완전 해 보입니다.

3. SEO 향상

검색 엔진 크롤러는 초기 HTML에 존재하기 때문에 Shadow DOM 내부의 콘텐츠를 색인 할 수 있습니다.

4. 진보적 인 향상

JavaScript없이 작동하는 구성 요소를 구축 한 다음 JS가로드되면 향상시킬 수 있습니다.

중요한 한계

• 동적 논리 없음 : 선언적이므로 템플릿에서 조건이나 루프를 사용할 수 없습니다 (JS와 달리).
• 스타일링 범위 : 템플릿 내부의 스타일은 그림자 루트로 스코핑됩니다. 좋지만 글로벌 리셋에주의하십시오.
• 브라우저 지원 : 2024 년 현재 크롬 기반 브라우저 (크롬, 에지 등)에서 지원됩니다. Firefox와 Safari는 여전히 구현을 진행하고 있습니다.

caniuse.com 에서 현재 상태를 확인할 수 있습니다.

폴백 전략

이전 브라우저를 지원 해야하는 경우 선언적이고 명령적인 접근 방식을 결합하십시오.

 <내 구성 요소>
  <template shadowroot = "Open">
    <p> 나는 즉시 브라우저를 지원하는 데 보여 지는데 </p>
  </템플릿>
</my-component>

<cript>
// 아직 처리되지 않은 경우 기존 템플릿을 재사용합니다
if (! myComponent.shadowRoot) {
  const template = myComponent.querySelector ( &#39;[ShadowRoot]&#39;);
  if (템플릿) {
    const shadow = mycomponent.attachshadow ({모드 : &#39;Open&#39;});
    Shadow.appendChild (template.content.clonenode (true));
  }
}
</스크립트>

이것은 우아한 열화를 보장합니다.

선언적 섀도우 Dom은 JavaScript 기반 Shadow Dom을 대체하지 않습니다. 특히 현대적인 SSR 중심 프레임 워크에서 상자에서 더 잘 작동하는보다 탄력적이고 성능이 좋은 웹 구성 요소를 향한 단계입니다.

기본적으로 : 한 번 쓰고 빠르게 렌더링하고 나중에 향상하십시오.

위 내용은 선언적 그림자 돔이 설명했다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!