섀도우 DOM 격리 방법 DOM의 스타일이 아님

웹 응용 프로그램과 전방 체험을 구축하는 직장 생활에서, 내가 구축하거나 방문하지 않은 작은 위젯을 DOM에 끼워 넣어야 하는 경우가 많았다.예를 들어 CMS에 전자상거래 소부품을 삽입하거나 크롬 확장을 구축하여 주어진 사이트를 강화한다.내가 겪은 가장 큰 좌절 중 하나는 style collision였다.나의 개발 환경에서 모든 작은 부품은 보기에 매우 좋으나, 내가 작은 부품을 고객 페이지에 추가할 때... 모든 것이 고장났다.

왜 이러지?

당신이 가지고 있지 않은 DOM에 작은 위젯을 삽입하는 것은 모든 DOM이 다른 기본 글꼴과 색을 인용하는 데 어려움이 있다.css 스타일시트가 정상적으로 보입니다.

body {
   font-family: my-awesome-font;
   font-size: 16px;
   color: #eee;
   line-height: 16px;
   box-sizing: border-box;
}

이 클라이언트 페이지의 주체에 작은 위젯을 끼워 넣을 때, 위와 같은 스타일을 계승합니다.때로는 괜찮지만, 내가 디자인한 예쁜 작은 부품을 파괴할 때가 많다. 왜냐하면 나는 서로 다른 글씨체 크기나 충전으로 작은 부품을 디자인했기 때문이다.

고전적 솔루션

역사적으로 우리는 두 가지 해결 방안이 있다.

iFrame을 사용합니다.

당신의 스타일에 대해 매우 명확해야 합니다.

비록 이 두 가지 해결 방안이 모두 효과가 있지만, 그것들은 모두 네가 처리해야 할 낙담적인 부분들이 있다.다음은 내가 과거에 한 예를 되돌아보고 이 블로그의 전체 내용인 복합 사용자 인터페이스를 만드는 신기함, 미래파 방식, 또는 그림자DOM을 소개한다.

iFrames 사용

iFrame에 대해 나는 요소의 크기를 조절할 수 없기 때문에 나의 작은 위젯 사용자는 반드시 그들의 DOM에서 나의 iFrame에 공간을 정확하게 구분해야 한다.만약 나의 작은 위젯이 동적 크기라면, 이것은 각양각색의 스크롤과 포지셔닝 문제를 초래할 것이다.
iFrame에서 발견한 두 번째 문제는 iFrame과 부모 간의 통신입니다.현재 CustomEvents를 사용할 수 있지만, 부모와 iFrame 상하문에 이벤트 시스템을 구축해야 합니다.만약 클라이언트에 이미 내장된 SDK가 있다면, 이것은 사람을 낙담하게 할 수도 있다.이것은 기본적으로 iFrame 통신의 SDK를 위한 미니 SDK를 구축한다.
마지막으로 아마도 가장 간단한 문제일 것이다. 내 소비자들은 iFrame의 어떤 스타일도 조정할 수 없다.이것은 사용자 인터페이스가 일치하지 않을 수도 있다. 이것은 나쁜 경험이다.

iFrame은 일을 할 수 있지만, 그것들은 이미 유행이 지났기 때문에 의사소통이 어렵다. 만약 작은 위젯의 크기가 동적이거나, 어떤 형식의 맞춤형 제작이 필요하다면, 행운을 빌어라.

CSS 특이성

내가 취한 더욱 흔한 방법은 나의 CSS를 초구체화하는 것이다.그래서 다 좋아요!이것은 지루할 수도 있고, 모든 통합 구성 요소의 새 클라이언트를 조정해야 할 수도 있다.작은 위젯 업데이트를 푸시하는 QA 프로세스도 어려울 것이다.클라이언트로 하여금 CSS를 사용하게 하고 통합을 파괴할 수 있는 많은 방법이 있습니다.

알겠습니다. 만약 iFrame을 사용하지 않거나 제 CSS를 분석하고 싶지 않다면 어떻게 해야 합니까?

그림자 구역 진입!

와, 무섭게 들리는데.. 뭘 물어보는 거야?DOM 패키지의 API입니다. 패키지가 얼마나 중요한지 잘 알고 있습니다.

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this Shadow DOM tree starts with a shadow root underneath which can be attached to any elements you want in the same way as the normal DOM.> -Using Shadow DOM

섀도우를 만드는 가장 기본적인 방법은 모든 DOM 요소에 첨부하는 것입니다.

const shadow = element.attachShadow({mode: 'open' || ‘closed’}); 

모드open 또는 closed에서 페이지의 자바스크립트가 그림자 DOM과 상호작용할 수 있는지 여부를 지정할 수 있습니다.개방은 상호작용을 할 수 있다는 것을 의미하고, 폐쇄는 상호작용을 할 수 없다는 것을 의미한다.
shadow 요소를 만든 후에 일반 DOM 노드처럼 추가할 수 있습니다.

const shadow = element.attachShadow({mode: 'open' || ‘closed’}); 
const styleNode = document.createElement(“style”);
style.textContent = `
    background: blue;
    font-size: 18px;
`;

shadow.appendChild(styleNode);

const contentNode = document.createElement(“div”);
contentNode.textContent = `Hello World`;
shadow.appendChild(contentNode);

위 코드는 shadow 노드를 만들고 노드 스타일을 shadow DOM에 추가하고div를 추가하여Hello World를 표시합니다.양식은 현재 격리되어 음영수에만 영향을 주고 부급을 오염시키지 않습니다.성공!

그러나 위의 예는 매우 상세하고 간단하여 그림자 DOM의 나체 실현만 보여주었다.섀도우 DOM이 할 수 있는 표면에 닿았을 뿐입니다.그것은 그렇게 복잡하지 않았고, 지금은 좋은 지지를 받았다.

리액트 섀도우로 DOM.

나는 시간이 좀 걸려서 내가 과거에 사용했던 매우 유용한 소프트웨어 패키지를 강조하고 싶다. 이것은 나에게 '와, 나는 정말 생산에서 그것을 사용할 수 있을 것 같다.' 라는 느낌을 주었다.
React Shadow 섀도우 DOM을 React로 처리하기 쉽습니다!위react-shadow에서 사용한 예는 다음과 같습니다.

import root from 'react-shadow';

export default () =>  (
    <root.div>
        <div>Hello World</div>
        <style type="text/css">
            background: blue;
            font-size: 18px;
        </style>
    </root.div>
);

지금 만약 이것이 마법이 아니라면, 나는 또 무엇이 있는지 모르겠다.그러니 나와 함께 미래를 향해 걸어가자.우리의 그림자 DOM을 두려워하지 말고 함께 아름다운 복합 사용자 체험을 창조합시다!