Quel est le substitut de :: shadow et / deep /?

Question

Les deux combinateurs de perforation d'ombre ont été déconseillés comme indiqué dans https://www.chromestatus.com/features/675045663834112
.

Answer 1

::shadow et /deep/ ont été supprimés pour rupture de l'encapsulation.

Les substituts sont:

• Variables CSS. Il fonctionne déjà en natif avec le Google récemment lancé Chrome 49. Lisez ici:
  1. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
  2. https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en
  3. http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html
• :Host-context. Lisez ici: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

Answer 2

Au Polymer 2:

• ::shadow (sélecteurs de perforation d'ombre) - il n'y a pas de substitut direct. À la place, des propriétés CSS personnalisées doivent être utilisées. Polymère 2: Propriétés CSS personnalisées

• /deep/ - il y a une sorte de remplacement en définissant :Host > * { ... } (applique un ensemble de règles à tous les enfants de niveau supérieur dans l'arborescence d'ombre de l'hôte, ce qui n'entre pas en conflit avec la règle du document principal).

Pour des informations plus détaillées, consultez Notes de mise à niveau de Polymer 2

Answer 3

Au moment de la rédaction, vous pouvez essayer ::part et ::theme avec Chrome 73 et supérieur:

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>

Vous pouvez styliser toutes les entrées avec:

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

Voici la documentation complète sur son fonctionnement:

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

Cela peut en quelque sorte résoudre votre problème, mais les jours où je stylisais les tweets intégrés avec ::shadow.

Answer 4

":: v-deep" fonctionne pour moi. Par exemple:

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

devient:

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