Safari 13.1? CSS Shadow Parts? ?? ??? ??????. ? ::part() ???? ?? Chrome, Edge, Opera, Safari ? Firefox? ?? ?????. ? ??? ? ??? ???? ?? Shadow Dom? ?? ??? ?????.

??? ? ??? ??

Giffgaff?? ?? ?? ???? ?? ???? ??? ?? CSS ??? ????. ??? ?? ??? ??? ? ??? ???.

?? ??

??? ?? ??? CSS?? ???? ????. ???? .price ?? ??? ??? ?? ? ????. ?? ??? (??? ?? ?????)? ?? ??? ?? ??? ??? ??? ? ????.

CSS? ??? ???? ????. ??? ???? ?? HTML ??? ??? ?? ? ??? ?? ????????.

Shadow Dom ?? ??? ?????. ?? ? ??? ????? ?? CSS-in-JS ?????? .bwzfXH ? ?? ??? ??? ??? ?? ??? ??? ??? ???? ?????. ??? ??? ??? ??? ? ??????! ??? CSS-in-JS? ?? ???? ?? ??? ???? ?? ?? ????. ?? ??……

?? ??? ? CSS ???

HTML ?? ???? ??? ? ???? (? :<button></button> ???<div> ) ???? ??????. ? ???? ?? ??? ??? ? ????. Shadow Dom? (??) ??? ??? ? ??? ???????. ??? ? ?? ??? ????? ?? ??? ?? ??? <code>!important ???????? ???? ?? ??? ?? ? ? ????.

 /* ??? ??? ??? ??? ??? ??? ????.*/
?? {??? : ??! ??; }

?? ?? ??? ??? ?????? ?? ?? ????? ???? ??? ????. ?? ?? ?????? ??? ???? Shadow Dom? ??? ??? ????.

??, ?? ? ?? ??? ?? ?? ??? ???? ??? ??Shadow Dom?? ???? ??? ??? ??? ????. ?? ????? all: initial ?? ??? all: revert .

HTML ??? ?? ???? CSS? ???? ?? ?? ?????. Eric Meyer? ??? ??? ??????.

 HTML, Body, Div, Span, Applet, Object, Iframe,
H1, H2, H3, H4, H5, H6, P, Blockquote, Pre,
ABBR, ??, ??, ?, ??, ??,
del, dfn, em, img, ins, kbd, q, s, samp,
??? ?? ?? ?? SUP TT var
b, u, i, ??,
DL, DT, DD, OL, UL, Li,
?? ?, ??, ??, ??,
???, ??, tfoot, tfoot, thead, tr, th, td,
??, ??, ???, ?? ??, ????,
??, ??, ?? ?, ??, HGROUP,
??, NAV, ??, ??, ??, ??,
??, ??, ???, ??? {
  ?? : 0;
  ?? : 0;
  ?? : 0;
  ?? ?? : 100%;
  ?? : ??;
  ?? ?? : ???;
}

???? ?? ??? ??? ????? ?? ?? ? ?? ?? ???? ?? ??????? ? ???? ??? ???? ??? ????? ?? ??? ??? ??? ? ????.

Shadow Dom? ??? ??? ??? ?????. Shadow Dom? ???? ?? ??? ???? ??? ? ???? ?? ? ? ????. ?? ?????? ?????? ?? ???? ???? ??? ????? ?? ?? ??? ??? ????. Shadow Dom? ?? ???? ?? ? ??? ??? ??? ?????.

??? ????? ?? ??? ?? ? ??? ?? ? ? ??? ????. ::part ???? ?? ?? ????.

:: part ()

???? CSS? ?? Shadow Dom?? ??? ?? ?? ???? ??? ??? ??? ??? CSS ??? ?? ??? ???? ????. ??? ??? ?????? ??? ?? ?? ? ???? ?? ????????. ?? ????? ???? ?? ??? ??? ? ????. ???? ????? ? CSS ??? ????? ??? ?? ??? ???????. ??? ?? ?? ???? ????.

?? ??? (? :hover )? ???? ??? ???? ?? ??? ??????? ??? ?? ??????. ?????, ??? ?? ??? ?? ???? ????. Ionic (?? ?? ? ?? ?? ??)? ?? ?? ?????. ?? ? ?? ?? ??? ?? ? ?? ??? ?? ??? ??????.

???? ??????.

23 ?? ??? ?? ??? ??????. ?? ????, ??? ????? ????.

??? ::part() to Style ??? ???? ????.

? ???? ?? ??, ??? ? ??? ??? ????? ?? ? ??? ?? ??? ?? ???? ?? ??? ??? ??? ? ????. :hover ? :focus ?? ??? ?? ??? ?????? ? ??? ? ?? ???? ??? ? ????.

? ?? ????? ?? ?? ??? ??? ??? ????? ? ?? ??? ?? HTML ??? ?? ? ?? ?? ??? ??? ?? ?? ??? ??? ?? ? ? ???? ?? ::part . ????? ?? ??? ???? ??? ?? ?? ??? ??? ?????? ?? ?????. ?? ?? ??? ?? ??? ??????? ?? ??? ?? ? ??? ????. ?? ??? ?? ??? ??? ???? ????? ??? ?? ??? ???? ??? ?? ?? ? ?? ? ? ????.

???? ?? ??? ?? ??? ?????? ?? ?? ::part ? ?? ?????. ????? ?? ??? ????? ??? part ??? ???? ????.

<div part="box"> ...</div>
<button>?? ??????</button>

? ???? ?? CSS ??? ???? div ??? ?? ? ? ????. CSS ??? ??? ? ????. ??? ??? ?? ????. ?? ?? ??? ????? ??? ??? ??? ? ????.

HTML ??? ?? ??? ??? ?? ??? ??? ??? ??? ?? part ??? ?? ? ????.

<div part="box thing"> ...</div>

??? ??? ?? ? ::part : ??? "??"? ??????? ?? ???? ???? ?? ? ?? ??? ???? ??? ?? ???? ?? ? ? ????. ??? ???, ?? ?? ????? ?? ?? ???? CSS ??? ??? ??????? ??? ? ?? ???? ??? ?????.