A aplicação de estilos para navegadores próprios elementos, a nativa ShadowDOM?
-
22-12-2019 - |
Pergunta
Depois de uma conversa por Rob Dodson na Web Components, onde ele mencionou a nova marca "gato" ^^
e "chapéu" ^
Seletores CSS, eu tenho perguntado sobre as possibilidades de aplicação de estilos, não só para um elemento personalizado do ShadowDOM, mas também para o navegador nativo dos elementos ShadowDOM?
É possível para elementos de estilo da ShadowDOM?Em quais navegadores e como?O único relevante artigo que eu encontrei foi por Dimitry Glazkov em 'O que Diabos é a Sombra de DOM?', onde ele estabelece chegar em ShadowDOM subárvores usando pseudo seletores e -webkit-appearance: none;
regras.
Solução
Devido ao estado do projecto de CSS, a Delimitação do âmbito de Nível de Módulo 1 ser capaz de alterar, a qualquer momento, a minha abordagem original não estava funcionando muito longo.
No Chrome v33+ você vai ter que virar Enable Experimental Web Platform Features
no chrome://flags
para o código a seguir para o trabalho.
Começando com O google Chrome Canary v33 e o seu gato seletor ^^
a resposta é: Sim!
Atualização 2014-03-30: O google Chrome Canary v35+ suporta a versão mais recente do seletor, agora o chamado /deep/
seletor de.
Ele estilos ao longo de todos os limites, e também funciona em elementos nativos.
Veja: http://codepen.io/Volker_E/pen/jsHFC
/* ... Example for applying to all h2 elements, no matter if DOM or any ShadowDOM subtree ... */
:root ^^ h2 {
font-family: "Arial Black", sans-serif;
}
/* Cr 33+: The "cat" also works on native elements' ShadowDOM */
video ^^ input[type="button"]:first-child {
opacity: .75;
-webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}
/* Cr 35+: /deep/ also works on native elements' ShadowDOM */
video /deep/ input[type="button"]:first-child {
opacity: .75;
-webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}
Outras dicas
É possível, pelo menos no Chrome.Se você verificar Sombra DOM de <input type="date">
você vai ver:
<input type="date">
#document-fragment
<div part="-webkit-datetime-edit" id="date-time-edit">
<div part="-webkit-datetime-edit-fields-wrapper">
<span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="12" aria-help="Month" part="-webkit-datetime-edit-month-field">mm</span>
<div part="-webkit-datetime-edit-text">/</div>
<span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="31" aria-help="Day" part="-webkit-datetime-edit-day-field">dd</span>
<div part="-webkit-datetime-edit-text">/</div>
<span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="275760" aria-help="Year" part="-webkit-datetime-edit-year-field">yyyy</span>
</div>
</div>
</input>
Em seguida, você pode estilo separado pseudo-elementos:
::-webkit-datetime-edit-year-field {
font-weight: bold;
}
De acordo com Rob Dodson-se é possível utilizar ^
e ^^
selectores de estilo nativo Sombra de DOM.Portanto, esta regra deve funcionar (Chrome Canary, eu acho):
input[type="date"] ^ [part="-webkit-datetime-edit-year-field"] {
font-weight: bold;
}