来自一个 Web 组件的样式用于所有具有 <style scope="custom-name"> 的实例

编程问答 2022-04-28

问题描述

背景 我有一个页面，其中包含 4 个使用 lit 元素的相同 Web 组件的实例。每个组件都接受属性来自定义主题，因此没有两个组件看起来真的一样。值得指出的是，我正在将 Web 组件导入 nextjs 应用程序。

问题 不过，在我加载页面的一半时间里，来自 Web 组件第一个实例的样式被插入到其他 3 个实例中，因此它们最终看起来完全相同。

以下是它工作时的示例。

<custom-background bg="url(https://www.image1.png) center center/cover" bgsm="url(https://www.image2.png) bottom center/cover">

<style>
.bg {
  background: url(https://www.image1.png) center center/cover;
}

@media (min-width: 660px) {
 .bg-sm {
   background: url(https://www.image2.png) bottom center/cover;
 }
}
</style>

<div class="bg bg-sm"></div>

</custom-background>

然后当它不工作时，我在 web 组件的所有实例上得到 scope="custom-background" 并且第一个实例的样式被插入到组件的每个其他实例中。所以第一个可能看起来像这样......

<custom-background bg="url(https://www.image1.png) center center/cover" bgsm="url(https://www.image2.png) bottom center/cover">

<style scope="custom-background">
.bg {
  background: url(https://www.image1.png) center center/cover;
}

@media (min-width: 660px) {
 .bg-sm {
   background: url(https://www.image2.png) bottom center/cover;
 }
}
</style>

<div class="bg bg-sm"></div>

</custom-background>

但其他 3 个实例看起来像这样...注意独特的 html 属性，但样式来自上面的那个。

<custom-background bg="url(https://www.image3.png) center center/cover" bgsm="url(https://www.image4.png) bottom center/cover">

<style scope="custom-background">
.bg {
  background: url(https://www.image1.png) center center/cover;
}

@media (min-width: 660px) {
 .bg-sm {
   background: url(https://www.image2.png) bottom center/cover;
 }
}
</style>

<div class="bg bg-sm"></div>

</custom-background>

我的尝试 我已经对此进行了一些研究，但是 scope 属性应该用于表头，并且该元素曾经具有 scoped 属性，但已弃用并且是布尔属性.

它几乎感觉像是一个性能特性，但它没有意识到 css 是不同的。以前有人见过这个问题吗，有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lit-elementscopescopescoped