The CSS properties defined on the :root selector in Nuxt cannot be located

In my Nuxt 2 app, I am attempting to create a component that includes a <style> tag with CSS properties for styling. My aim is to set default CSS properties within the component that can then be overridden externally.

However, I have encountered an issue where the default values do not seem to take effect at all.

<style lang="scss" scoped>
:root {
  --default-badge-color: linear-gradient(90deg, #1717ff 0%, #bc29e0 92%);
  --default-badge-text-color: #fff;
  --default-badge-font-size: 1.6rem;
  --default-badge-padding: 0.6rem 1rem;
  --default-badge-border-radius: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--badge-padding, var(--default-badge-padding));
  border-radius: var(--badge-border-radius, var(--default-badge-border-radius));
  background: var(--badge-color, var(--default-badge-color));
  color: var(--badge-text-color, var(--default-badge-text-color));
  font-size: var(--badge-font-size, var(--default-badge-font-size));
  text-align: center;
}
</style>

Am I using the wrong syntax for this approach?

EDIT: I have now corrected the line to 

padding: var(--badge-padding, var(--default-badge-padding))
. However, the CSS properties still do not apply unless defined directly inside the .badge selector.

cssvue.jsvuejs2nuxt.js

Answer №1

Trying to apply styles to the :root selector in Vue may not be the most logical choice, as it is meant to target the document's root with higher specificity than the html selector. It's akin to trying to style the <body> element.

If you're looking for a way to target the root element of the current component like the :host does in Shadow DOM, Vue does not have a similar pseudo-class. An alternative approach would be to assign your own class to the component's root element and use that class as a selector:

<template>      👇
  <div class="my-root">
    <div>...</div>
    <div class="badge">...</div>
  </div>
</template>

<style scoped>
   👇
.my-root {
   /* CSS custom properties */
}

.badge {
  /* styles using the CSS custom properties above */
}
</style>

Alternatively, if you do need to add CSS custom properties to the document root within <style scoped>, you can utilize the :global() function on :root:

<style scoped>
:global(:root) {
  /* CSS custom properties */
}

.badge {
  /* styles using the CSS custom properties above */
}
</style>

Check out this demo 1 for more information.

Another option is to have a separate global <style> block specifically for :root:

<style>
:root {
  /* CSS custom properties */
}
</style>

<style scoped>
.badge {
  /* styles using the CSS custom properties above */
}
</style>

Take a look at demo 2 for an example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which type of comparator does Vuetify utilize for sorting string columns in a data table?

If I modify the standard Vuetify example to have Calorie values as Strings instead of numbers, and now the data is not entirely numeric: https://codepen.io/hobbeschild/pen/WNQWmrJ What sorting method does Vuetify use internally for ordering these Strings? ...

sortingvue.jsecmascript-6vuetify.jsv-data-table

Incorporating additional rows into a SQL Table according to user-provided information

My application features editable table rows using Vue, which pull data from a database. Currently, there is a button (add line) that inserts a row into the database when clicked. Is it possible to automatically add a specified number of lines based on user ...

sql-servervue.js

Issues with jQuery causing responsive CSS triangles to fail implementations

Recently, I stumbled upon the interesting concept of CSS triangles created using element borders. I decided to incorporate this design into one of my custom Wordpress themes, but I encountered a problem. I wanted to add a triangle at the bottom of a div, l ...

jqueryhtmlcss

The element 'axios' is not recognized on this type

After diving into Vue for the first time, I encountered a stumbling block with axios. All instructions were followed correctly during installation and importation from the website guide. However, an error surfaced when attempting to utilize it. TS2339: P ...

vue.jsaxios

Integration of JavaScript files in HTML leads to the disappearance of the slider component

After adding two sliders to my web page, I noticed that only one of them is working when I link all the necessary JavaScript files into the HTML page. It seems that the new JavaScript files for the second slider are causing the first slider to not show up ...

javascriptjqueryhtmlcss

The transition effect is not functioning properly in CSS and React.js

.cartBtn { appearance: none; outline: none; border: none; cursor: pointer; text-align: center; background-color: transparent; color: inherit; } .cartBtn:hover { color: black; } .cart { display: none; opacity: 0; transition: all 4s ea ...

cssreactjshovercss-transitionsdisplay

The Open Graph feature in Vue 3 is only functioning properly on the homepage, with issues occurring on other routes

My VueJS website is up and running on GitHub pages, but I have encountered a problem with the open graph settings. They are placed in the <head> section inside /index.html. Here's a snippet of the code: <head> <meta name="descrip ...

vue.jsvue-routerfacebook-opengraph

Issue with div element not functioning properly within table declaration on Internet Explorer

There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...

javascriptcsshtml-table

How to present retrieved data with spaces or line breaks in PHP

I need help on how to display data with spaces or line breaks. Currently, I am using textarea for the news content when adding and editing, and the data type for my news content is text. This is how I want the content to be displayed: https://i.sstatic.ne ...

phphtmlcss

The ExpressJs server is receiving an empty request object from VueJS when attempting a delete request with axios. Interestingly, Postman is able

I am currently utilizing ExpressJS in conjunction with Postgres, Knex, Objection, and VueJS on the frontend of my application. The database contains information about Users, Groups, and Memberships. The Memberships table links Users and Groups together. M ...

expressvue.jsaxiosknex.jsobjection.js

I'm looking to retrieve the current caret position within a text-field using JavaScript/Vue. Any suggestions on how to achieve this?

I am exploring a slight improvement to enhance user experience by allowing users to modify the dollar amount in a text field if the cents are fully entered. Currently, when users move to another field (triggering an @blur event), my fields automatically a ...

javascripthtmlvue.jsvuejs2vuetify.js

What is causing this issue with my jQuery UI animation?

Below is the HTML code snippet: <div id="menu_status_item"> <span class="menu_status_bar"></span> </div> Here is the CSS code: #menu_status_item { margin-top: 40px; width: 100%; } .menu_status_bar { margin-le ...

javascriptjqueryhtmlcss

Is there a way to attach event listeners to raw HTML that has been imported using code?

I'm facing a challenge with importing SVG code embedded in an HTML file and using the v-html directive to render it. The issue is that I need to attach click events to the anchor tags within that imported file, which are not part of my main template. ...

javascriptvue.js

increasing the top margin on an HTML document

Looking to create a specific amount of blank space at the top of your HTML page? The space needs to be exactly X pixels tall. How can this be achieved effectively, while ensuring compatibility with Safari? ...

htmlcsssafari

Creating a dynamic and interactive table with Angular and the amazing angular-responsive-tables library

I am currently working on creating a responsive table using AngularJS. To demonstrate what I am trying to achieve, I have put together an example in this fiddle: https://jsfiddle.net/loredano/xnyzaLnu/1/ <tr ng-repeat="product in products" > &l ...

htmlcssangularjs

Whenever attempting to detach(), I am encountering the following error message: local.ERROR: Call to a member function programs() on an integer

I am dealing with a Many to Many relationship between Courses and Programs. The insertion of new courses and adding multiple programs works correctly. However, the issue arises during updates. When I update a course, I want to detach all related programs a ...

laravelvue.js

jQuery cannot access a hidden CSS property

I'm working on a form for my new project and have assigned the same class to all input fields. In my CSS file, I've set the text to be capitalized and it displays correctly. However, when I use jQuery's .val() to get the value of the field, ...

javascriptjqueryhtmlcss

Is it possible to generate a component dynamically using a string template?

I have a Component called "CDataTable" that renders columns in a for loop. Inside the loop, there is a template: <template v-if="typeof col.template !== 'undefined'" #body="{data}"> <component :is="compile(co ...

javascriptvue.jsvuejs3

What types of mobile browsers, devices, and operating systems are currently compatible with HTML 5, CSS3, and jQuery?

Which mobile browsers, devices, and OS versions are currently compatible with HTML 5, CSS3, and jQuery? ...

xhtmlhtmlcssmobile-website

The header does not extend fully to the top edge

I am attempting to relocate the header to the topmost position on my webpage. However, despite my efforts, it remains in its current position. You can view an example of the issue in this fiddle http://jsfiddle.net/DCtH7/4/ Upon examining the fiddle, you ...

htmlcss