文章/答案/技术大牛

发布

问将样式表作用域到元素
EN

Stack Overflow用户

提问于 2021-03-04 10:09:15

回答 2查看 45关注 0票数 0

我已经用Vuetify和Vue-custom-element构建了一个web组件。它的用法如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://shopify-recs-ai.web.app/widget/app.js"></script>
    <link rel="stylesheet" href="https://shopify-recs-ai.web.app/widget/app.css">
  </head>
  <body>
    <vue-widget
      id="recs"
      title="Recommended for you"
      products="[{'title': 'Tie Dye 3.0 Socks', 'price': '$25 CAD', 'src': 'https://cdn.shopify.com/s/files/1/0077/0182/3585/products/DarkBlueTeal.jpg?v=1607693781', 'url': 'https://google.com'}, {'title': 'Fresh Prince 2.0', 'price': '$25 CAD', 'src': 'https://cdn.shopify.com/s/files/1/0077/0182/3585/products/BrightPink_BrightBlue_FreshPrince.jpg?v=1613129041', 'url': 'https://google.com'}, {'title': 'Multi-colour tie dye socks', 'price': '$25 CAD', 'src': 'https://cdn.shopify.com/s/files/1/0077/0182/3585/products/Berry_Blue.jpg?v=1572960500', 'url': 'https://google.com'}, {'title': 'Iced doughnut socks', 'price': '$25 CAD', 'src': 'https://cdn.shopify.com/s/files/1/0077/0182/3585/products/icingblue.jpg?v=1568465365', 'url': 'https://google.com'}]"
    />
  </body>
</html>

该组件的样式表正在覆盖网页中其他元素的样式。我如何“作用域”样式表，使样式只应用于我的自定义元素？

html

css

vuetify.js

回答 2

Stack Overflow用户

发布于 2021-03-04 11:48:21

我将为小部件创建一个单独的组件文件，在该文件中可以将样式标记设置为scoped，并在其中导入外部样式表。

代码示例：

<style scoped>
@import "https://shopify-recs-ai.web.app/widget/app.css";
</style>

票数 0

Stack Overflow用户

发布于 2021-03-04 23:35:22

我能够通过创建一个卷影dom并在其中加载外部样式来解决这个问题-- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#internal_versus_external_styles

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66467583

复制

相似问题

问将样式表作用域到元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将样式表作用域到元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将样式表作用域到元素
EN