Removing ::shadow and /deep/ in Chrome 63

Removing ::shadow and /deep/ in Chrome 63

Starting in Chrome 63, you cannot use the shadow-piercing selectors ::shadow
and /deep/ to style content inside of a shadow root.

  • The /deep/ combinator will act as a descendant selector. x-foo /deep/ div
    will work like x-foo div.
  • The ::shadow pseudo-element will not match any elements.

Note: If your site uses Polymer, the team has put together a thorough guide
walking through steps to migrate off of ::shadow and /deep/.

The decision to remove

The ::shadow and /deep/ were deprecated in Chrome version 45. This was
decided by all of the participants at the April 2015 Web Components
meetup.

The primary concern with shadow-piercing selectors is that they violate
encapsulation and create situations where a component can no longer change its
internal implementation.

Note: For the moment, ::shadow and /deep/ will continue to work with
JavaScript APIs like querySelector() and querySelectorAll(). Ongoing support
for these APIs is being discussed on
GitHub.

The CSS Shadow Parts spec
is being advanced as an alternative to shadow piercing selectors. Shadow Parts
will allow a component author to expose named elements in a way that preserves
encapsulation and still allows page authors the ability to style multiple
properties at once.

What should I do if my site uses ::shadow and /deep/?

The ::shadow and /deep/ selectors only affect legacy Shadow DOM v0
components. If you’re using Shadow DOM v1, you should not need to change
anything on your site.

You can use Chrome Canary
to verify your site does not break with these new changes. If you notice issues,
try and remove any usage of ::shadow and /deep/. If it’s too difficult to
remove usage of these selectors, consider switching from native shadow DOM over
to the shady DOM polyfill. You should only need to make this change if your site
relies on native shadow DOM v0.

More information

Intent to Remove |
Chromestatus Tracker |
Chromium Bug


This content originally appeared on Updates and was authored by

Removing ::shadow and /deep/ in Chrome 63

Starting in Chrome 63, you cannot use the shadow-piercing selectors ::shadow and /deep/ to style content inside of a shadow root.

  • The /deep/ combinator will act as a descendant selector. x-foo /deep/ div will work like x-foo div.
  • The ::shadow pseudo-element will not match any elements.

Note: If your site uses Polymer, the team has put together a thorough guide walking through steps to migrate off of ::shadow and /deep/.

The decision to remove

The ::shadow and /deep/ were deprecated in Chrome version 45. This was decided by all of the participants at the April 2015 Web Components meetup.

The primary concern with shadow-piercing selectors is that they violate encapsulation and create situations where a component can no longer change its internal implementation.

Note: For the moment, ::shadow and /deep/ will continue to work with JavaScript APIs like querySelector() and querySelectorAll(). Ongoing support for these APIs is being discussed on GitHub.

The CSS Shadow Parts spec is being advanced as an alternative to shadow piercing selectors. Shadow Parts will allow a component author to expose named elements in a way that preserves encapsulation and still allows page authors the ability to style multiple properties at once.

What should I do if my site uses ::shadow and /deep/?

The ::shadow and /deep/ selectors only affect legacy Shadow DOM v0 components. If you're using Shadow DOM v1, you should not need to change anything on your site.

You can use Chrome Canary to verify your site does not break with these new changes. If you notice issues, try and remove any usage of ::shadow and /deep/. If it's too difficult to remove usage of these selectors, consider switching from native shadow DOM over to the shady DOM polyfill. You should only need to make this change if your site relies on native shadow DOM v0.

More information

Intent to Remove | Chromestatus Tracker | Chromium Bug


This content originally appeared on Updates and was authored by


Print Share Comment Cite Upload Translate Updates
APA

| Sciencx (2017-10-24T00:00:00+00:00) Removing ::shadow and /deep/ in Chrome 63. Retrieved from https://www.scien.cx/2017/10/24/removing-shadow-and-deep-in-chrome-63/

MLA
" » Removing ::shadow and /deep/ in Chrome 63." | Sciencx - Tuesday October 24, 2017, https://www.scien.cx/2017/10/24/removing-shadow-and-deep-in-chrome-63/
HARVARD
| Sciencx Tuesday October 24, 2017 » Removing ::shadow and /deep/ in Chrome 63., viewed ,<https://www.scien.cx/2017/10/24/removing-shadow-and-deep-in-chrome-63/>
VANCOUVER
| Sciencx - » Removing ::shadow and /deep/ in Chrome 63. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2017/10/24/removing-shadow-and-deep-in-chrome-63/
CHICAGO
" » Removing ::shadow and /deep/ in Chrome 63." | Sciencx - Accessed . https://www.scien.cx/2017/10/24/removing-shadow-and-deep-in-chrome-63/
IEEE
" » Removing ::shadow and /deep/ in Chrome 63." | Sciencx [Online]. Available: https://www.scien.cx/2017/10/24/removing-shadow-and-deep-in-chrome-63/. [Accessed: ]
rf:citation
» Removing ::shadow and /deep/ in Chrome 63 | | Sciencx | https://www.scien.cx/2017/10/24/removing-shadow-and-deep-in-chrome-63/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts