Почему определенный элемент DOM не может иметь стили CSS - PullRequest
0 голосов
/ 05 апреля 2019

При разработке приложения Angular я столкнулся со следующей проблемой: у элемента SVG не было стилей из его класса (даже если он был определен в теге <styles>) и что более специфично (и смысл вопрос): Chrome и Firefox DevTools не позволяли добавлять стили элементов вручную .

Chrome DevTools not showing element.styles Обратите внимание на отсутствующий блок element.styles на правой панели.

Однако, если я отредактирую элемент контейнера HTML и просто скопирую и вставлю обратно разметку - он внезапно появляется и все работает, как ожидалось. Так что это должно произойти из-за способа, которым элемент добавляется в DOM программно. И поскольку это поведение одинаково как в Chrome, так и в Firefox, это, скорее всего, функция, а не ошибка.

Так как этого можно достичь преднамеренно?

P.S. Для тех, кто интересуется угловой частью, вот проблема GitHub, о которой я сообщал для этого случая (также содержит репродукцию репродукции): https://github.com/angular/material2/issues/15727

1 Ответ

0 голосов
/ 07 апреля 2019

Так что я нашел ответ сам. TL; DR : элемент был создан с document.createElementNS с неизвестным пространством имен (или пустым), что сделало его Element, а не SVGElement.Стили не определены для base Elements в соответствии со спецификацией.

Таким образом, очевидно, что ключ должен был проверить тип элемента - и Chrome, и Firefox показали, что SVG создан как base * 1009.*:

Element is created as a base Element, rather than an HTMLElement or SVGElement

Следующий вопрос: как это произошло?TL; DR для этого раздела: из-за ошибки в новом экспериментальном компиляторе Angular (возможно) он был добавлен с недопустимым пространством имен, а остальное соответствует спецификации.

Поиск в источнике Angular показал, как он создает элементы: createElementNS .

Быстрый эксперимент с этой функцией подтвердил первоначальное предположение, что проблема была в интерфейсе элемента (Element), и ее можно воспроизвести, передав недопустимое пространство имен.

И спецификация DOM точно показала, почему это происходит:

шаги createElementNS :

внутренние шаги createElementNS ...:...4. Вернуть результат создания элемента данного документа, localName, namespace , префикс is и с установленным флагом синхронных пользовательских элементов.

Создание элемента определяется следующим образом:

Чтобы создать элемент с заданным документом, localName, пространством имен и необязательным префиксом is и флагом синхронных пользовательских элементов, запустите этишаги:...4. Пусть definition будет результатом поиска пользовательского определения элемента в данном документе, namespace , localName и is.

Looked upопределение в этом случае оказывается NULL:

Чтобы найти пользовательское определение элемента, заданного документа, пространства имен, localName и, выполните следующие действия.Они вернут либо пользовательское определение элемента, либо ноль:1. Если пространство имен не является пространством имен HTML, возвращает ноль .

Возвращаясь к createElementNS шагам до этого:

...7. В противном случае: [определение равно нулю]

  1. Пусть interface будет элементом interface для localName и пространства имен.
  2. Установить результат для нового элемента, который реализует интерфейс , без атрибутов, для пространства имен задано пространство имен, для префикса пространства имен задан префикс, для локального имени задано значение localName, для пользовательского состояния элемента задано значение "uncustomized"msgstr ", определение пользовательского элемента установлено в ноль, значение установлено в is, а документ узла установлен в document....

И, наконец, 1087 * интерфейс элемента определяется следующим образом: :

Интерфейс элемента для любого имени и пространства имен - Элемент , если не указано иное.

Что касается невозможности добавления пользовательских стилей, это связано с отсутствующим свойством style вбаза Element.Вероятно, это связано со спецификацией атрибута style :

Все HTML-элементы могут иметь установленный атрибут содержимого стиля.Это атрибут стиля, определенный в спецификации атрибутов стиля CSS.

HTML-элементы :

Для упрощенияПри переходе с HTML на XML UA, соответствующие этой спецификации, будут помещать элементы в HTML в пространство имен http://www.w3.org/1999/xhtml, по крайней мере, для целей DOM и CSS.Термин «элементы HTML» относится к любому элементу в этом пространстве имен, даже в документах XML.

Однако свойство style существует в SVGElement и, возможно, в некоторых других базовых прототипах, поэтому необходимобыть некоторые другие спецификации, которые позволяют это.Но я думал, что это выходит за рамки моего первоначального вопроса.

И на этом мои исследования заканчиваются.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...