Shopify Question posted in
The Shopify help center can be found here.

Scope style sheet to element – Shopify

I have built a web component with Vuetify and Vue-custom-element. It is used like so:

<!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>

The style sheet for the component is overriding styles for other elements in the web page. How can I ‘scope’ the stylesheet so the styles only apply to my custom element?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to solve this by creating a shadow dom and loading external styles inside of it - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#internal_versus_external_styles


  2. 0

    I would create a separate component file for the widget, inside which you could set the style tag to scoped and import the external stylesheet in there.

    Code example:

    <style scoped>
@import "https://shopify-recs-ai.web.app/widget/app.css";
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search