如果我想从外部保留事件，但如何防止自定义事件冒泡，如何隐藏DOM

Question

我正在尝试使用Shadow DOM封装自定义事件冒泡，但仍然从外部获取样式。

• 我尝试使用插槽，发现保留了外部样式，但是无法封装事件。

• 我试图直接将child附加到shadowroot，但是后来我失去了所有外部样式。

所以我想实现的是...

• 外部样式可以渗入，在这种情况下跨度将变为颜色：红色

• 自定义事件'span-clicked'被组件的边界阻止

• 标准事件（例如click）将整个组件视为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>标记，则需要在影子DOM中包含该<style>标记的clone 。

在我撰写本文时，您唯一的其他选择是使用CSS变量，该变量将允许外界更改内部CSS的值。 但是随后您必须编写CSS才能使用变量。

无论您选择哪种方式，如果您将这些样式复制到CSS变量中或通过CSS变量来影响它们，则都只会影响Shadow DOM中元素的样式。 如果您不包括一些新的，意外的CSS，那么它将不会被应用。

并且由于您希望Shadow DOM转换事件的目标，因此必须将DOM放置在阴影中，而不要使用<slot> 。

还有其他方法正在研究中，但是这些方法将在一段时间内消失。 大概几年。

我希望这回答了你的问题。 不幸的是，我认为这不是您要查找的。