Правильный способ применения CSS к пользовательским элементам HTML5

Question

У меня есть собственный тег HTML5 с именем <scroll-content>. Этот тег фактически создается и вставлен для меня каркасом в некоторых местах внутри моего HTML-файла. Теперь я хотел бы изменить CSS этого тега так в моем файле CSS я пошел:

scroll-content{ 
    overflow: hidden; 
} 

Он сделал то, что он должен был, но это правильный способ укладки пользовательских тегов?

Я не могу добавить к ним класс, потому что я не создаю теги, фреймворк делает, поэтому я не могу получить к ним доступ в своем коде, и я бы хотел избежать использования Javascript для поиска этих тегов и добавления классов сюда.

Я бы предпочел узнать стандартный/безопасный способ изменения пользовательских тегов.

Answer 1

Вы можете применить CSS к пользовательским элементам так же, как вы можете стандартные HTML-элементы.

Нет ничего плохого в том, что scroll-content { ... }, как написано в вашем коде.

---

Маленький фон

Браузер, на базовом уровне, не имеет понятия, что существуют элементы. Он ничего не узнает ... до он выставлен по умолчанию таблице стилей (sample).

В таблице стилей по умолчанию представлен браузер для элементов HTML.

Таким образом, пользовательские элементы могут быть определены как элементы, которые не включены в таблицу стилей по умолчанию. (Элементы, которые существуют, но не поддерживаются браузером, могут делиться этим определением.)

Пользовательские элементы, однако, могут быть введены в браузер в стилях автора.

Вот что-то важно учитывать:

Если браузер не распознает элемент (то есть, это не в таблице стилей по умолчанию), он будет применять CSS начальных значений.

6.1.1 Specified values

Агенты пользователей должны сначала присвоить указанное значение каждого свойства на основе на следующих механизмов (в порядке приоритета):

1. Если результаты каскада в значении, используй это.

2. В противном случае, если свойство наследуется и элемент не является корнем дерева документа, используйте вычисленное значение родительского элемента .

3. В противном случае используйте начальное значение свойства. Начальное значение каждого свойства указывается в определении свойства.

Как указывалось выше, если элемент не распознан (# 1 & # 2 не применяются), использовать начальное значение из определения свойства (# 3 применяется).

Так что в вашем случае:

• Ваш пользовательский элемент является: <scroll-content>

• Ваш CSS является: scroll-content { overflow: hidden; }

• Вы говорите, что в вашем вопросе, что этот код делает то, что он должен делать. Но если в рамке, которую вы упомянули, не предусмотрены дополнительные стили для пользовательских элементов, она не может работать (demo).

Вот почему:

• Поскольку <scroll-element> не в таблице стилей по умолчанию он будет использовать начальные значения CSS.

• Ну, the initial value of the display property is inline.

• Но the overflow property only works on block elements.

Так что нет никакого способа это HTML/CSS сочетание может работать – overflow собственность будет игнорироваться, равно как и height, width и любые другие свойства, которые не применяются к строковым элементам.

Пользовательский элемент должен иметь display: block для overflow для работы (demo).

Аналогичным образом, единственная причина body, div, h1, p, ul существуют в виде блочных элементов, потому что они определены таким образом, в таблице стилей по умолчанию (sample).

Итак, отложив аргументы за и против пользовательских элементов, вот в нижней строке:

Добавить display: block в пользовательских элементов, и вы хорошо к ходу.

Answer 2

Было бы предпочтительнее, если бы вы могли избежать использования пользовательских тегов, поскольку вы никогда не знаете, когда эти теги могут стать стандартизованными или иметь определенное использование в какой-то момент.

Я думаю, что было бы безопаснее, если вы создаете класс для этого пользовательского тега, что-то вроде:

.scroll-content{ 
    overflow: hidden; 
}