Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this:

<style lang="scss"> ... </style>

<style lang="stylus"> ... </style>

I checked the documentation for the style tag and found that lang is not a valid attribute. Is it advisable to use lang in this way when creating scoped styles involving additional CSS preprocessor languages?

Answer №1

The Vue loader guide strongly emphasizes the need to follow this specific instruction. It's not just a suggestion but rather a requirement for the feature to function properly.

Although it blatantly violates the HTML standard by using the lang attribute with custom values, JavaScript frameworks and components often prioritize functionality over adhering to standards. In many cases, they choose convenience over compliance, skipping the data- prefix to save time and effort. However, in my opinion, this is simply a weak excuse for overlooking proper coding practices.

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

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width. I want the navigation to be 80% of the full width, wi ...

Encountering Errors with Angular JS Following Update from Version 1.1.0 to 1.1.1

After upgrading, I noticed that the ng-repeat function is taking significantly longer to load and is attempting to display additional content boxes without serving the actual content provided by $resource. I have pinpointed the issue to the update from ve ...

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

This question may seem simple, but I have been searching for an answer and haven't found one yet. Imagine we have an HTML element with dimensions specified in pixels: <div style="width:750px; height: 250px"></div> We can easily resize i ...

How to prompt the browser to download a file with a specific name using node.js and express

I've created a node/express website as part of my university project. It allows users to search for a specific law ID, which then displays a table with various files in different formats and languages related to that ID. I am using the "http-proxy" mo ...

What is the best way to layer four images in a 2x2 grid over another image using CSS as the background

I am attempting to place 4 images of the same size on a 5th image defined as the background. Currently, it looks like this: It works perfectly when the height is fixed, but in my case, the height may vary causing this issue: This problem isn't surp ...

When conditions are met, all items are added to the array

In my Angular app, I have a user list that I am trying to filter based on the condition age > 45. However, all users are being pushed into the validForScheme array instead of just those meeting the condition. I am unable to figure out what is going wron ...

Enhance user experience by implementing a feature in AngularJS that highlights anchor

As I am in the process of developing a chat application using Angular, I have encountered an issue with switching between views. One view, named 'chat.html', displays the list of available users while another view, 'chatMessages.html', ...

Retrieve storage information when an internet connection is unavailable on React Native

One of my recent projects involves creating an application that retrieves data from a URL in the form of an array of objects and then displays this data using FlatList. Upon launching the application, the data is displayed correctly since it's retriev ...

WordPress does not recognize the jQuery function

I have encountered an issue with my code where a simple HTML jQuery slider works fine in a standalone file, but when I integrate it into WordPress, it no longer functions properly. The slider is being added to the index.php file by hardcoding the script li ...

Is the utilization of react-router for developing 'single-page applications' causing a depletion of server resources?

Hello, I am relatively new to the world of web development and would appreciate guidance on any misunderstandings I may have. Currently, I am immersing myself in learning the MERN stack. For my practice project, I am aiming to create a simple two-page webs ...

Modify the Vue.js/CSS asset hash to enforce updated changes

When building a Vue app in production mode with the command: NODE_ENV=production vue-cli-service build The static assets get hash fingerprints added to them, like this: dist/js/chunk-vendors.d710a916.js 986.81 KiB 297.69 KiB dist/js/app. ...

What is the best way to showcase my divs in a masonry layout using flexbox?

I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some ...

Reordering the stacking order of Grid Items in material-ui

I'm facing an issue with the stacking order of grid items when the browser shrinks. On a regular desktop screen (lg): --------------------------------------------- | col 1 | col 2 | col 3 | --------------------------------------- ...

Issue with Ajax reload functions malfunctioning

Embarking on a new journey, I am diving headfirst into the world of web development. As an artist and writer, I have recently delved into the realm of creating a project that integrates a cms, project manager, and database front-end using php, mysql, and j ...

What is the best way to display compiled Transcluded HTML in Angular?

I am facing a challenge in trying to display customized HTML content using Angular directives for nesting divs multiple times. When I execute the code below, the transcluded tag is displayed correctly but the browser output shows the string text " ". I att ...

The v-for directive is unable to access the prop data

<template> <span> <i class="fa fa-star text-warning fa-2x" v-for="r in rating" :key="r"></i> <h1>{{rating}}</h1> </span> </template> <script> ...

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

Saving the selections from two drop-down menus into a single variable

I have a requirement to store the user selected values from two dropdown menus. These dropdowns are created using the selectize library in HTML: <div style="max-width: 200px"> <select id="dropdown-1" ...

Element on webpage "Expands" When Scrolled into Visibility

After posting a question on Stack Overflow, I noticed discrepancies between the element dimensions reported by Chrome Inspector and Selenium WebDriver. While Chrome Inspector showed w = 979, h = 1961, Selenium returned dimensions of 979 and 1461 respective ...

When I click on a link to redirect it, I am confronted with a bizarre rectangle that

When attempting to create redirects using images, I encountered a small issue. Take a look at this screenshot: This is the item in question: <p><div><a title="Home" href="/home"><img src="/icons/home.svg" ...