CODEWITHSUNDEEP
webweb-componentshadow-dom
Zhengquan Bai
Zhengquan Bai

Reputation: 1073

What's the substitute for ::shadow and /deep/?

The two shadow-piercing combinators have been removed, as stated in https://www.chromestatus.com/features/6750456638341120

So, what's the substitute for achieving the same thing? Or has this shadow-piercing feature been completely abandoned?

Upvotes: 32

Views: 19408

Answers (4)

KirstieBallance
KirstieBallance

Reputation: 1358

"::v-deep" is working for me. For example: 

    .menu {
        // stuff
    }
    /deep/.sub-menu {     // override submenu
        .sub-menu__mini {
                //stuff
            }
            a, a:hover {
                //stuff
            }
        }
    }

becomes:

    .menu {
        // stuff
    }
    ::v-deep .sub-menu {     // override submenu
        .sub-menu__mini {
                //stuff
            }
            a, a:hover {
                //stuff
            }
        }
    }

Upvotes: 0

Marcelo Glasberg
Marcelo Glasberg

Reputation: 30909

::shadow and /deep/ were removed for breaking encapsulation.

The substitutes are:

Upvotes: 20

sparanoid
sparanoid

Reputation: 1558

At the time of writing you can try ::part and ::theme with Chrome 73 and above:

https://www.chromestatus.com/feature/5763933658939392

<submit-form>
  #shadow-root
  <x-form exportparts="some-input, some-box">
    #shadow-root
    <x-bar exportparts="some-input, some-box">
      #shadow-root
      <x-foo part="some-input, some-box"></x-foo>
    </x-bar>
  </x-form>
</submit-form>

<x-form></x-form>
<x-bar></x-bar>

You can style all the inputs with:

:root::part(some-input) { ... }

There is the full documentation how it works:

https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md

This somehow can solve your problem, but I still miss the days how I styled embedded tweets with ::shadow.

Upvotes: 2

magiccrafter
magiccrafter

Reputation: 5484

As of Polymer 2:

  • ::shadow (shadow-piercing selectors) - there is no direct substitute. Instead a custom CSS properties has to be used. Polymer 2: Custom CSS Properties

  • /deep/ - there is some sort of replacement by defining :host > * { ... } (applies a ruleset to all of the top-level children in the host's shadow tree, which doesn't conflict with the rule in the main document).

For more detailed information check Polymer 2 Upgrade Notes

Upvotes: 2

Related Questions