Ответ 1
Вы можете применить CSS к настраиваемым элементам, как вы можете, к стандартным элементам HTML.
Нет ничего плохого в scroll-content { ... }, как написано в вашем коде.
Маленький фон
Браузер на базовом уровне не знает, какие элементы существуют. Он ничего не узнает... до он отображается в таблице стилей по умолчанию (sample).
Таблица стилей по умолчанию вводит браузер в элементы HTML.
Пользовательские элементы поэтому могут быть определены как элементы, которые не включены в таблицу стилей по умолчанию. (Элементы, которые существуют, но не поддерживаются браузером, могут использовать это определение.)
Пользовательские элементы могут, однако, быть введены в браузер в стилях автора.
Здесь что-то важное для рассмотрения:
Если браузер не распознает элемент (т.е. он не находится в таблице стилей по умолчанию), он будет применять начальные значения CSS.
Пользовательские агенты сначала должны назначить указанное значение для каждого свойства на следующих механизмах (в порядке приоритета):
Если каскад приводит к значению, используйте его.
В противном случае, если свойство наследуется и элемент не является корнем дерева документа, используйте вычисленное значение родительского элемента элемент.
В противном случае используйте начальное значение свойства. Начальное значение каждого свойства указывается в определении свойства.
Как указано выше, если элемент непризнан (# 1 и # 2 не применяются), используйте начальное значение из определения свойства (применяется # 3).
Итак, в вашем случае:
-
Ваш пользовательский элемент:
<scroll-content> -
Ваш CSS:
scroll-content { overflow: hidden; } -
В своем вопросе вы говорите, что этот код делает то, что он должен делать. Но если упомянутая вами фреймворк не предусматривает дополнительные стили для настраиваемых элементов, он не может работать (демонстрация).
Вот почему:
-
Так как
<scroll-element>не находится в таблице стилей по умолчанию, он будет использовать начальные значения CSS.
Таким образом, эта комбинация HTML/CSS не может работать – свойство overflow будет игнорироваться, как и height, width и любые другие свойства, которые не применяются к встроенным элементам.
Пользовательский элемент должен иметь display: block для overflow для работы ( demo).
Аналогично, единственная причина body, div, h1, p, ul существует в качестве элементов блока, потому что они определены таким образом в таблице стилей по умолчанию ( sample).
Итак, отложив аргументы за и против настраиваемых элементов, в нижней строке:
Добавьте display: block к своим пользовательским элементам, и вы хорошо себя чувствуете.