The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message:

[Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information.

The error seems to be related to using clientWidth or clientHeight in my code:

document.getElementById(this.ID).clientWidth;

or possibly here:

document.documentElement.scrollTop = parseInt(sessionStorage.getItem('scrollPosition'), 10);

Is this a misinterpretation by the browser? How can I resolve this issue?

htmlcssangular

Answer №1

important update!

::slotted is now fully supported by all modern browsers and can be utilized with `ViewEncapsulation.ShadowDom` for improved performance.

Learn more about ::slotted here

original details:

The deprecation of /deep/ in browsers does not affect Angular's functionality.

Angular automatically adjusts the selector to avoid using /deep/ or its newer alternative ::ng-deep during application loading.

/deep/ and ::ng-deep are merely signals for Angular to exclude the specific class (like _ngcontent-1) that Angular adds to each component host element from the CSS selector.

For further insights, check out this article on shadow DOM strategies in Angular 2

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

Craft a unique parallax effect using Framer Motion's clipping feature

To help visualize my concept, I have sketched it out using Figma. This idea involves a slide transitioning between pages. The goal is to cover the entire page with a sliding effect, and then place a sticker (dubbed the Parallax Box) on top of it. However ...

cssreactjsnext.jsframer-motion

Discovering an <a> element with an href attribute containing two specified strings

Here's what I have: $("a[href*='string1' && 'string2']") Unfortunately, this code didn't work for me. I also attempted: $("a:contains('string1' && 'string2')") The second one only return ...

javascriptjqueryhtml

What is the best way to overlay elements with a gray background?

Here is a snapshot of the local web page: [defective image deleted] This is what the deployed webpage looks like on Vercel: https://i.sstatic.net/NJJJp.png The issue is that the gray div is revealing its underlying elements. .zoombackground { ba ...

htmlcssreactjs

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

I am facing an issue with adding javascript files and css to a content page of a master page in asp.net. I attempted to include a datetime picker on my ContentPage, but it only works on the masterpage. When I try to add the same code to my contentpage, i ...

javascriptcssasp.net

Tips for sending an Object within a multipart/form-data request in Angular without the need for converting it to a string

To successfully pass the object in a "multipart/form-data" request for downstream application (Java Spring) to receive it as a List of custom class objects, I am working on handling metadata objects that contain only key and value pairs. Within the Angula ...

javascriptangulartypescriptspring-bootmultipartform-data

How to efficiently display nested object data using Angular Keyvalue pipe

I am facing an issue with a particular HTTP request that returns an observable object containing multiple properties. One of these properties is the 'weight' object which has two key values, imperial and metric. While attempting to loop through ...

angulartypescriptobservableasync-pipe

Each element is being adorned with the Ajax success function class

Currently, I am in the process of creating an Ajax function to integrate search features into my project. The search function itself is functioning properly; however, within the success: function, I am encountering an issue. Specifically, I am attempting t ...

javascripthtmljquerycss

The MSI installer for electron-builder is rejecting the asar file due to its excessive

My Angular application requires an MSI installer, but I encountered an error while trying to create one for the electron app I developed using `npm run electron`. The error message states: Error LGHT0263 : 'C:...\release\win-unpacked&bsol ...

angularnpmelectronelectron-builderasar

Getting the values of several labels using a class name - a comprehensive guide

Is there a way to retrieve the values of labels with the "timeAuction" class? I'm currently working on a JavaScript function that will target each label with the class name timeAuction and adjust its value. The number of labels with this class can va ...

javascriptjqueryhtml

Slider in Angular Material not moving along the track

When I attempt to slide the mat-slider control using the mouse, it doesn't move left or right. Instead, it only responds when I click on a specific point along the sliding line. Here is the code snippet I am using: <div> <mat-slider>& ...

angularangular-material2

The functionality of the Regions plugin in wavesurfer.js appears to be completely nonfunctional

I've been attempting to utilize the Regions plugin from wavesurfer.js, but unfortunately, it's not functioning as expected. Despite trying various methods suggested on different websites, I have yet to achieve success. Below is the snippet of c ...

javascripthtmlpluginswaveformwavesurfer.js

The <div> tag fails to comply with the Display: inline CSS property

I need help with a web development issue as I am new to this field. My problem is that I am trying to display three divs next to each other, but despite applying display:inline-block to them, they still appear stacked on top of each other instead of side b ...

htmlcssinlinedisplay

Encountered an error while attempting to run npm install for angular2-tree-component

I recently attempted to install the angular2-tree-component, but encountered a failure in the process. As I am still gaining experience with this technology stack, I would greatly appreciate some assistance in resolving this issue... /R/VKS/oryol/oryo ...

node.jsangularnpmtreeviewnpm-install

Why is the Routes module failing to acknowledge the component?

I am in the process of developing my own Portfolio and decided to use Angular 12. Despite following all of the instructions on angular.io, I am facing challenges with Routing. To demonstrate my work more effectively, I have created a Stack Blitz: My Portf ...

angulartypescriptangular-routing

sending a collection of image data arrays wrapped in FormField objects from Angular to Express

I am facing a challenge while trying to upload two FormField objects along with form data to express. I am having trouble using the multer library in express to extract this data from the request. While I can access the form data, the FormField objects re ...

javascriptnode.jsangularexpressfile-upload

Pressing the different buttons on a form does not result in the form being submitted

I have a form with multiple buttons that, when submitted, will redirect to a different page and pass along some variables. echo " <form method=\"POST\" action=\"sightWordsTest.php\"> ...

phpjqueryhtmlforms

Encountering an issue with the message "chartobject-1.render() Error >> Unable to locate the container DOM element." within a JavaScript function

I have encountered an issue while working with Fusion Charts in my HTML page using JavaScript. When attempting to display two charts simultaneously, I receive an error message that says: "fusioncharts.js:71 Uncaught RuntimeException: #03091456 chartobjec ...

javascripthtmljsonajaxfusioncharts

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

javascriptcss

Fixed and percentage widths in horizontal divs for children, with the percentage width exceeding the desired size

Here's the code snippet I'm working with: http://pastebin.com/W3ggtgZB. The body of this code can be found here: http://pastebin.com/2tkmhnfW. My goal is to create a div containing two child divs. One child div should have a fixed width, while t ...

htmlsizewidthpercentagechildren

What is the best way to fetch a partial JSON response object from an API using JavaScript?

Currently, I am utilizing the One Bus Away API, returning a response object in this format: { "code": 200, "currentTime": 1504150060044, "data": { "entry": { "arrivalsAndDepartures": [ {AnD_item1 ...

javascriptjsonangularjsonpobservable