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

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

scroll-content{
  overflow: hidden;
}

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

Здесь что-то важное для рассмотрения:

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

6.1.1 Указанный значения

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

  • Если каскад приводит к значению, используйте его.

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

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

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

Итак, в вашем случае:

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

  • Ваш CSS: scroll-content { overflow: hidden; }

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

Вот почему:

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

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

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

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

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

Ответ 2

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

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

.scroll-content{
    overflow: hidden;
}

Это должно сделать это.