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

我试图使用阴影DOM封装自定义事件冒泡，但仍然从外部获取样式

• 我尝试使用slot，发现它保留了外部样式，但无法封装事件

• 我曾尝试将child直接附加到shadowroot，但后来我丢失了所有外部样式

所以我想要实现的是

• 外部样式可能会渗入，在这种情况下，span将获得颜色：红色

• 自定义事件“span clicked”被组件的边界阻止

• 标准事件（如click）将整个组件视为srcmelement

有什么方法可以实现以上三点吗？多谢各位

var outer=document.getElementById（'outer'）；
var shadowroot=outer.attachShadow（{mode:'open'}）；
shadowroot.innerHTML=`
`; 
var spanInsideShadow=document.getElementById（'span_inside_shadow'）；
暗影根。附属子（Spanideshadow）；
var spanInLightDom=document.getElementById（'span_in_slot'）；
spanInsideShadow.addEventListener（'click'，函数（e）{
dispatchEvent（新事件（'span-clicked'，{bubbles:true}））；
}); 
外部.addEventListener（'span-clicked'，函数（e）{
console.log（'outer-received-custom-event.don-want！'）；
}); 
外部.addEventListener（'click'，函数（e）{
log（'click-event-received，source-elem='，e.src-element）；
});
span{
颜色：红色；
}

SPAN\u在\u灯光\u DOM\u但\u渲染\u在\u插槽中
A_正常_跨度_外部
SPAN\u将被添加到\u shadow\u根中
自动转换事件目标并将外部样式转换为阴影DOM的唯一方法是在阴影DOM中包含所有DOM和CSS。而不是使用

如果通过
标记加载外部CSS文件，则可以在阴影DOM中包含相同的
标记

如果要在主页中包含
标记，则需要在阴影DOM中包含该
标记的
克隆

在我写这篇文章时，您唯一的另一个选择是使用CSS变量，这将允许外部世界更改内部CSS的值。但是，您必须编写CSS来使用变量

无论选择哪种方式，只有在复制阴影DOM中的元素样式或通过CSS变量影响这些样式时，才能影响阴影DOM中元素的样式。如果您没有包含一些新的、意外的CSS，那么它将不会被应用

由于您希望阴影DOM转换事件的目标，因此必须将DOM放置在阴影中，而不是使用

还有其他方法正在研究中，但这些方法在一段时间内不会过时。大概几年吧

我希望这能回答你的问题。不幸的是，我认为这不是您想要了解的。
自动转换事件目标并将外部样式转换为阴影DOM的唯一方法是在阴影DOM中包含所有DOM和CSS。而不是使用

如果通过
标记加载外部CSS文件，则可以在阴影DOM中包含相同的
标记

如果要在主页中包含
标记，则需要在阴影DOM中包含该
标记的
克隆

在我写这篇文章时，您唯一的另一个选择是使用CSS变量，这将允许外部世界更改内部CSS的值。但是，您必须编写CSS来使用变量

无论选择哪种方式，只有在复制阴影DOM中的元素样式或通过CSS变量影响这些样式时，才能影响阴影DOM中元素的样式。如果您没有包含一些新的、意外的CSS，那么它将不会被应用

由于您希望阴影DOM转换事件的目标，因此必须将DOM放置在阴影中，而不是使用

还有其他方法正在研究中，但这些方法在一段时间内不会过时。大概几年吧

我希望这能回答你的问题。不幸的是，我认为这不是您想要了解的。
我在Chrome&Safari中看到的正是您想要的行为。你得到了不同的结果吗？请参阅演示，获得了相同的行为，所需的行为正是我在Chrome&Safari中看到的。你得到了不同的结果吗？请参见演示，以获得相同的行为