DOM을 그림자 처리하는 방법 외부에서 이벤트를 보복하고 사용자 정의 이벤트 버블 링을 방지하려면

Question

사용자 정의 이벤트 버블 링을 캡슐화하기 위해 섀도우 DOM을 사용하려고하지만 여전히 외부에서 스타일을 가져 오려고합니다.

• 나는 외부 스타일을 유지하지만 이벤트를 캡슐화 할 수없는 슬롯을 사용하려고했습니다.

• 나는 shadowroot에 자식을 직접 추가하려고 시도했지만 그 다음에 모든 외부 스타일을 잃어 버렸습니다. '레드

• 사용자 정의 이벤트 :

그래서 내가 무엇을 달성하고자하는 것은

• 외부 스타일 색상을 얻을 것이다,이 경우 기간에,에 피가 수 있습니다 ...이다 span-clicked '는 구성 요소의 경계에 의해 차단됩니다.

• 표준 이벤트 (예 : 클릭)에는 전체 구성 요소가 srcElement로 표시됩니다.

위의 세 가지를 모두 달성 할 수있는 방법이 있습니까? 고마워요!

var outer = document.getElementById('outer'); 
 
var shadowroot = outer.attachShadow({mode: 'open'}); 
 

 
shadowroot.innerHTML = ` 
 
    <slot></slot> 
 
`; 
 

 
var spanInsideShadow = document.getElementById('span_inside_shadow'); 
 
shadowroot.appendChild(spanInsideShadow); 
 

 
var spanInLightDom = document.getElementById('span_in_slot'); 
 

 
spanInsideShadow.addEventListener('click', function(e){ 
 
    spanInsideShadow.dispatchEvent(new Event('span-clicked', {bubbles: true})); 
 
}); 
 

 

 
outer.addEventListener('span-clicked', function(e){ 
 
    console.log('outer received custom event. Do not want this!'); 
 
}); 
 

 
outer.addEventListener('click', function(e){ 
 
    console.log('click event received, source elem = ', e.srcElement); 
 
});

span { 
 
    color: red; 
 
}

<div id='outer'> 
 
    <div id='inner'> 
 
    <span id='span_light_dom'> SPAN_IN_LIGHT_DOM_BUT_RENDERED_IN_SLOT </span> 
 
    </div> 
 
</div> 
 

 
<div> 
 
<span id='span_normal'>A_NORMAL_SPAN_OUTSIDE </span> 
 
</div> 
 

 
<div> 
 
<span id='span_inside_shadow'>SPAN_WILL_BE_APPENDED_TO_SHAODOW_ROOT</span> 
 
</div>

나는 내가 충분히 자신을 분명히 설명하고 바랍니다. 당신의 도움을 주셔서 대단히 감사합니다!

Answer 1

이벤트 대상을 자동 변환하고 외부 스타일을 Shadow DOM으로 가져 오는 유일한 방법은 모든 DOM과 CSS를 Shadow DOM에 포함시키는 것입니다. 그리고 <slot>을 사용해서는 안됩니다.

<link> 태그를 통해 외부 CSS 파일을로드하는 경우 그림자 DOM에 동일한 <link> 태그를 포함 할 수 있습니다.

메인 페이지에 <style> 태그를 포함하는 경우 그림자 홈 내에 <style> 태그의 clone을 포함해야합니다.

필자가 작성한 다른 옵션은 바깥 세상이 내부 CSS의 값을 변경할 수있게 해주는 CSS 변수를 사용하는 것뿐입니다. 그렇다면 변수를 사용하기 위해 CSS를 작성해야합니다.

어떤 방법을 선택하든간에 CSS 변수를 통해 스타일을 복사하거나 영향을 미치는 경우에만 그림자 DOM 내의 요소의 스타일에 영향을 줄 수 있습니다. 예기치 않은 새로운 CSS를 포함시키지 않으면 적용되지 않습니다.

그림자 대상 DOM이 이벤트 대상을 변환하도록하려면 <slot>을 사용하지 말고 DOM을 그림자 안에 배치해야합니다.

다른 방법도 있지만 그 중 일부는 종료되지 않습니다. 아마 몇 년.

이 질문에 대한 답변을 보내주십시오. 불행하게도 나는 이것이 당신이 알아 내고 싶다고 생각하지 않는다.