{"id":5175,"date":"2017-05-27T00:00:00","date_gmt":"2017-05-27T00:00:00","guid":{"rendered":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/"},"modified":"2023-11-06T10:00:24","modified_gmt":"2023-11-06T09:00:24","slug":"scoped-vs-unscoped-styles-in-vue-components","status":"publish","type":"post","link":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/","title":{"rendered":"Scoped vs Unscoped Styles in Vue Components"},"content":{"rendered":"\n<p>When working with Vue\u201a the ideal development setup is to use&nbsp;<a href=\"https:\/\/github.com\/vuejs\/vue-loader\">vue-loader<\/a>&nbsp;to load .vue files. If you\u2019ve never heard of .vue files\u201a they basically take the idea of self contained components to the next level by allowing you to contain the template\u201a css and component logic within a single file\u201a and have it compile and render on your page at runtime. Nice right?<\/p>\n\n\n\n<p>However\u201a the way the style loader works is that it inserts the css into the DOM in a style tag\u201a which could potentially pollute the styling of other elements on the page if your selectors are very generic. To get around this\u201a you can append the \u201cscoped\u201d attribute to the style tag. What this does is add a unique identifier to every element in your template\u201a and add this same rule to your styling rules so that that rule will only ever be applicable within the component that defined it. Great! No more leaky styles!<\/p>\n\n\n\n<p>However\u201a it\u2019s quite common (for me at least) to be using sub components within my single component\u201a for instance&nbsp;might pull in a&nbsp;component wrapper that has the HTML markup of a modal. So what if we want to tweak the styles in this instance of the wrapper component? As this component isn&#8217;t in the compilation scope our unique identifier won&#8217;t be applied to these elements.<\/p>\n\n\n\n<p>Luckily there is a solution to this. It\u2019s actually possible to use as many&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with Vue\u201a the ideal development setup is to use&nbsp;vue-loader&nbsp;to load .vue files. If you\u2019ve never heard of .vue files\u201a they basically take the idea of self contained components to the next level by allowing you to contain the template\u201a css and component logic within a single file\u201a and have it compile and render [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2479,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[151],"tags":[149,160],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Scoped vs Unscoped Styles in Vue Components | hedgehog lab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scoped vs Unscoped Styles in Vue Components | hedgehog lab\" \/>\n<meta property=\"og:description\" content=\"When working with Vue\u201a the ideal development setup is to use&nbsp;vue-loader&nbsp;to load .vue files. If you\u2019ve never heard of .vue files\u201a they basically take the idea of self contained components to the next level by allowing you to contain the template\u201a css and component logic within a single file\u201a and have it compile and render [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/\" \/>\n<meta property=\"og:site_name\" content=\"hedgehog lab\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-27T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-06T09:00:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonia Hayianni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonia Hayianni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/\",\"url\":\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/\",\"name\":\"Scoped vs Unscoped Styles in Vue Components | hedgehog lab\",\"isPartOf\":{\"@id\":\"https:\/\/hedgehoglab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg\",\"datePublished\":\"2017-05-27T00:00:00+00:00\",\"dateModified\":\"2023-11-06T09:00:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#primaryimage\",\"url\":\"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg\",\"contentUrl\":\"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg\",\"width\":1920,\"height\":1280},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hedgehoglab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scoped vs Unscoped Styles in Vue Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hedgehoglab.com\/#website\",\"url\":\"https:\/\/hedgehoglab.com\/\",\"name\":\"hedgehog lab\",\"description\":\"Mobile App Developer in UK &amp; USA\",\"publisher\":{\"@id\":\"https:\/\/hedgehoglab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hedgehoglab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hedgehoglab.com\/#organization\",\"name\":\"hedgehog lab\",\"url\":\"https:\/\/hedgehoglab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/hedgehoglab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/06\/Vector-3.svg\",\"contentUrl\":\"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/06\/Vector-3.svg\",\"width\":179,\"height\":149,\"caption\":\"hedgehog lab\"},\"image\":{\"@id\":\"https:\/\/hedgehoglab.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scoped vs Unscoped Styles in Vue Components | hedgehog lab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/","og_locale":"en_GB","og_type":"article","og_title":"Scoped vs Unscoped Styles in Vue Components | hedgehog lab","og_description":"When working with Vue\u201a the ideal development setup is to use&nbsp;vue-loader&nbsp;to load .vue files. If you\u2019ve never heard of .vue files\u201a they basically take the idea of self contained components to the next level by allowing you to contain the template\u201a css and component logic within a single file\u201a and have it compile and render [&hellip;]","og_url":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/","og_site_name":"hedgehog lab","article_published_time":"2017-05-27T00:00:00+00:00","article_modified_time":"2023-11-06T09:00:24+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg","type":"image\/jpeg"}],"author":"Antonia Hayianni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Antonia Hayianni","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/","url":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/","name":"Scoped vs Unscoped Styles in Vue Components | hedgehog lab","isPartOf":{"@id":"https:\/\/hedgehoglab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#primaryimage"},"image":{"@id":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#primaryimage"},"thumbnailUrl":"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg","datePublished":"2017-05-27T00:00:00+00:00","dateModified":"2023-11-06T09:00:24+00:00","breadcrumb":{"@id":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#primaryimage","url":"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg","contentUrl":"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/08\/50d79892fee1773d555c1fa4b9335efa.jpeg","width":1920,"height":1280},{"@type":"BreadcrumbList","@id":"https:\/\/hedgehoglab.com\/scoped-vs-unscoped-styles-in-vue-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hedgehoglab.com\/"},{"@type":"ListItem","position":2,"name":"Scoped vs Unscoped Styles in Vue Components"}]},{"@type":"WebSite","@id":"https:\/\/hedgehoglab.com\/#website","url":"https:\/\/hedgehoglab.com\/","name":"hedgehog lab","description":"Mobile App Developer in UK &amp; USA","publisher":{"@id":"https:\/\/hedgehoglab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hedgehoglab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/hedgehoglab.com\/#organization","name":"hedgehog lab","url":"https:\/\/hedgehoglab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/hedgehoglab.com\/#\/schema\/logo\/image\/","url":"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/06\/Vector-3.svg","contentUrl":"https:\/\/hedgehoglab.com\/wp-content\/uploads\/2023\/06\/Vector-3.svg","width":179,"height":149,"caption":"hedgehog lab"},"image":{"@id":"https:\/\/hedgehoglab.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/posts\/5175"}],"collection":[{"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/comments?post=5175"}],"version-history":[{"count":1,"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/posts\/5175\/revisions"}],"predecessor-version":[{"id":6591,"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/posts\/5175\/revisions\/6591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/media\/2479"}],"wp:attachment":[{"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/media?parent=5175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/categories?post=5175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hedgehoglab.com\/wp-json\/wp\/v2\/tags?post=5175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}