Zdefiniowane przez autora nazwy usług CSS i shadow DOM: w specyfikacji i w praktyce

Noam Rosenthal

Zdefiniowane przez autora nazwy CSS i model DOM powinny ze sobą współdziałać. Przeglądarki nie są jednak zgodne ze specyfikacją, a czasami każda i każda nazwa usługi porównywania cen jest nieco inna.

W tym artykule opisujemy bieżący stan zachowania nazw CSS zdefiniowanych przez autora w obszarach z cieniami, a w rezultacie może posłużyć za wskazówkę i interoperacyjności w najbliższej przyszłości.

Czym są zdefiniowane przez autora nazwy usług porównywania cen?

Zdefiniowane przez autora nazwy plików CSS to stosunkowo stary mechanizm składni CSS. wprowadzone w regule @keyframes, która definiuje <keyframe-name> jako Identyfikator niestandardowy lub ciąg znaków. Celem tej koncepcji jest zadeklarowanie, w jednej części arkusza stylów, a odwołać się do niej w innej części.

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

Inne funkcje CSS, które korzystają z nazw CSS, to czcionki, deklaracje właściwości, zapytań dotyczących kontenerów, a także nowoczesne przejścia, pozycjonowanie zakotwiczonych reklam i czyli animacje przewijane. Ta niekompletna tabela zawiera nazwy które Chrome sprawdza stan.

Jak widać w tabeli, nazwa usługi porównywania cen ma zwykle odpowiednią usługę porównywania cen. dokumentu referencyjnego. Na przykład animation-name jest odwołaniem do elementu @keyframes imię i nazwisko. Nazwy CSS różnią się od nazw zdefiniowanych w DOM, takich jak atrybuty i nazw tagów, tak jak są zadeklarowane, a następnie się do nich odwoływać w kontekście arkuszy stylów.

Jaki związek mają nazwy z shadow DOM

Nazwy CSS służą do tworzenia relacji między różnymi częściami pliku dokument lub arkusz stylów, Shadow DOM to aby działać na odwrót. Obejmuje relacje, aby nie wyciekły w komponentach sieciowych, które powinny mieć własną przestrzeń nazw.

Połączenie nazw CSS i modelu shadow DOM ułatwia komponenty sieciowe powinny sprawiać wrażenie na tyle ekspresywne, aby były elastyczne, ale ograniczone. wystarczająco stabilne.

Teoretycznie jest to dobre. W praktyce przeglądarki nie działają w sposób CSS nazwy współdziałają z shadow DOM, obie funkcje w tym samym między przeglądarkami, a także między funkcjami a specyfikacjami.

Jak nazwy i model shadow DOM powinny współpracować

Aby zrozumieć ten problem, warto zrozumieć, jak te części kodu CSS które teoretycznie powinny współpracować.

Zasada ogólna

Ogólną regułę zachowania nazw CSS w drzewie cieni zdefiniowano w sekcji Specyfikacja zakresu CSS na poziomie 1. Podsumowując: nazwa CSS jest globalna i mieści się w określonym zakresie, co oznacza jest dostępna z poziomu drzew potomnych, ale nie od drzew potomnych drzew nadrzędnych. Zwróć uwagę, że różnią się one od nazw na platformie internetowej, identyfikatorów elementów umieszczonych w tym samym zakresie drzewa.

Wyjątek od reguły: @property

W przeciwieństwie do innych nazw CSS właściwości CSS nie są zawarte w modelu shadow DOM. Są to raczej typowe sposoby przekazywania parametrów w różnych cieniach drzew. Dzięki temu Deskryptor @property specjalna: powinna zachowywać się jak deklaracja typu dokumentu typu globalna, określa działanie określonej właściwości nazwanej. Ponieważ właściwości muszą być zgodne w odniesieniu do drzew cieniowych, niezgodność deklaracji właściwości wywołałaby nieoczekiwane wyników, więc deklaracje @property są przeznaczone do spłaszczenia i zakończenia według kolejności dokumentów.

Jak reguła powinna działać w przypadku funkcji ::part

Części cienia ujawnianie elementu wewnątrz drzewa cienia dla drzewa nadrzędnego. Dzięki temu drzewo nadrzędne może uzyskać dostęp do tego elementu i określić jego styl za pomocą atrybutu ::part .

Ponieważ ::part umożliwia określenie stylu tego samego elementu w 2 zakresach drzewa, to określono kolejność kaskadową:

1. Najpierw sprawdź styl w kontekście cienia. To jest „domyślne” stylu tej części.
2. Następnie zastosuj styl zewnętrzny zgodnie z definicją w pliku ::part. To jest „niestandardowe” stylu tej części.
3. Następnie zastosuj dowolny styl wewnętrzny zdefiniowany w zasadzie !important. Dzięki temu element niestandardowy może zadeklarować, że określona właściwość określonego elementu tej części nie można dostosować przez: ::part.

Oznacza to, że nie można odwoływać się do nazw z modelu shadow DOM ::part, ponieważ ::part to styl ograniczony do hosta, a nie ograniczony do cienia stylu. Na przykład:

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

Jak reguła powinna działać w przypadku stylów wbudowanych

W odróżnieniu od ::part style wbudowane z atrybutem style lub automatyczne ustawianie stylu za pomocą skryptu, są ograniczone do miejsca, w którym element jest ograniczony do zakresu. Dzieje się tak, ponieważ aby zastosować styl do elementu, do którego potrzebujesz dostępu uchwyt elementu, a tym samym sam pierwiastek cienia.

Jak nazwy CSS i shadow DOM współdziałają w rzeczywistości

Chociaż poprzednie reguły są dobrze zdefiniowane i spójne, obecne nie zawsze jest to odzwierciedlane. W praktyce @property działa inaczej niż specyfikacja, w spójny sposób działa w różnych przeglądarkach, a większość pozostałych funkcji ma otwarte błędy (niektóre jeszcze nie są opublikowane, więc jest czas, aby je naprawić).

Aby przetestować i zademonstrować działanie tych funkcji w praktyce, opracowaliśmy ta strona: https://css-names-in-the-shadow.glitch.me/. Na tej stronie znajduje się kilka elementów iframe, z których każdy dotyczy jednej z funkcji i służy do testowania 6 scenariusze:

• Zewnętrzne odniesienie do nazwy zewnętrznej: bez uwzględniania modelu shadow DOM, w naszej pracy.
• Zewnętrzne odniesienie do nazwy wewnętrznej: to nie powinno zadziałać, ponieważ spowodowałoby to oznacza, że nazwa zdefiniowana w kontekście cienia wyciekła.
• Wewnętrzne odniesienie do nazwy zewnętrznej: powinno zadziałać jako nazwy ograniczone do drzewa. są dziedziczone przez pierwiastki cienia.
• Wewnętrzne odniesienie do nazwy wewnętrznej: powinno to zadziałać, ponieważ zarówno nazwa klucza odwołania znajdują się w tym samym zakresie.
• Odwołanie ::part do nazwy zewnętrznej: powinno zadziałać, ponieważ ::part a nazwa są zadeklarowane w tym samym zakresie.
• Odniesienie ::part do nazwy wewnętrznej: to nie powinno zadziałać, ponieważ zakres zewnętrzny jest nieprawidłowy. nie powinny zdobywać wiedzy o nazwach zadeklarowanych w modelu shadow DOM.

@keyframes

Zgodnie z definicją w specyfikacji powinno być możliwe odwoływanie się do nazw klatek kluczowych. z pierwiastka cienia, o ile tylko reguła @keyframes jest elementem nadrzędnym zakresu. W praktyce żadna przeglądarka nie stosuje tego zachowania, a klatka kluczowa definicje można odwoływać się tylko do zakresu, w którym zostały zdefiniowane. Zobacz numer 10540.

@property

Zgodnie z definicją w specyfikacji każda deklaracja atrybutu @property zostanie do zakresu dokumentu. Obecnie we wszystkich przeglądarkach możesz tylko zadeklaruj @property w zakresie dokumentu i deklaracje @property w rdzenie cieni są ignorowane.
Zobacz problem 10541.

Błędy dotyczące przeglądarki

Inne funkcje nie wykazują spójnego działania w różnych przeglądarkach:

• @font-face jest spłaszczony do zakresu głównego w Safari.
• Chromium nie zezwala na dziedziczenie reguł @anchor-name w katalogu głównym
• @scroll-timeline-name i @view-timeline-name mają nieprawidłowy zakres na ::part (również w Chromium).
• Żadna przeglądarka nie zezwala na zadeklarowanie wartości @font-palette-values w rdzeniach cieni.
• Element view-transition-class można zdefiniować wewnątrz pierwiastka cienia (przejście znajduje się poza korzeniem cienia).
• Firefox zezwala przeglądarce ::part na dostęp do nazw wewnętrznych cieni (zapytania dotyczące kontenerów, klatki kluczowe).
• Przeglądarki Firefox i Safari nie respektują zasady @counter-style znajdującej się w katalogu głównym.

Zwróć uwagę, że counter-reset, counter-set, counter-increment mają nieco ponieważ są to niejawne nazwy i deklarują właściwości CSS mają ugruntowane i dobrze przetestowane reguły.

Podsumowanie

Zła wiadomość jest taka, że przy analizie aktualnego stanu interoperacyjności Jeśli chodzi o nazwy CSS i shadow DOM, wrażenia są niespójne, . Żadna z analizowanych tutaj funkcji nie działa spójnie zgodnie ze specyfikacją. Dobra wiadomość jest taka, że dążenie do spójności obsługi jest ograniczone. listę błędów i problemów ze specyfikacją. Poprawmy to! Tymczasem to omówienie może być przydatne, jeśli masz problemy z niespójności opisanych w tym artykule.