Краткое описание проблемы:
Я ищу способ установить значения размера шрифта (аналогично установке некоторого свойства в em-значение) в элементе внутри теневого dom относительно теневого хоста, независимо от размера шрифта родительского элемента в теневой дом. Что-то похожее на то, как работают rem-значения, но с тень как root вместо корня html.
Причиной этого является возможность масштабирования контента, например, виджета (который вставляется с теневым dom) в одном месте. Если свойства, основанные на размере шрифта, можно масштабировать таким образом, весь виджет можно масштабировать в каждом контексте, не устанавливая множество значений css, чтобы он соответствовал каждому местоположению.
Длинное описание проблемы:
Я ищу способ разметки текста (размер шрифта) на основе данного элемента в DOM, чтобы иметь возможность масштабировать различные части содержимого внутри этого элемента на основе этого элемента переноса (хорошо для виджетов и т.д.)., Это не только для фактического текста, часто бывает полезно наложить множество значений css на размер шрифта, поэтому элементы визуального макета масштабируются с размером текста (например, заполнение, радиус и тени). Если все основано на em-values, это может стать немного грязным. Если в элементе есть несколько уровней шрифта-шрифта, и я хочу увеличить первый уровень без изменения второго, мне нужно будет увеличить em первого уровня в dom, а уменьшить на любом элементе второго уровня (который рассчитывается на основе этого первого уровня), чтобы текст подэлементов оставался одного и того же размера. Это во многих случаях менее оптимально.
Хорошее решение базируется на Root EM (rem), поэтому изменение одного уровня dom не влияет на подэлементы. Однако, если я хочу увеличить/уменьшить размер всего текста внутри этих элементов упаковки (в одном месте), не затрагивая другие элементы на той же странице, мне нужно будет увеличить/уменьшить значения всех размеров шрифта для элементов внутри этого оберточного элемента.
Недавно я начал изучать веб-компоненты с помощью Shadow DOM и шаблонов. В тегах-шаблонах css инкапсулируется, что отлично, потому что дизайн этого окна/виджета/компонента может быть разработан самостоятельно, не задумываясь о остальной части дизайна, нежелательных унаследованных значениях и т.д. Наконец, хороший способ сделать независимые компоненты для создания веб-страницы. Но было бы здорово, если бы я мог установить своего рода размер шрифта для корневого шаблона для самого шаблона. Поэтому, если я установил некоторый элемент внутри шаблона как размер шрифта 2rem (или любой другой подобный блок), тогда размер шрифта этого элемента будет равным 2x размеру корневого шрифта шаблона, независимо от размера шрифта в хосте элемент, в котором используется этот шаблон, и независимо от размера шрифта корня страницы (элемент html).
Когда я тестировал с помощью rem-значений внутри шаблона, он все еще основывался на размере шрифта root (html tag). Я также тестировал vw-значения, но это также основано на всем видовом экране, а не только на инкапсулированной области (теневой корень).
Я просмотрел множество статей о Shadow DOM, но я не смог найти решение по этой проблеме. Любые предложения?
Что происходит (упрощенные примеры):
<html style="font-size: 16px">
<body style="font-size: 12px">
I am 12px large
<!-- em, based on the body in this case -->
<div style="font-size: 1.5em">
I am 18px large
<div style="font-size: 1.5em">
I am 27px large
</div>
</div>
<!-- rem, based on the styles of the html element -->
<div style="font-size: 1.5rem">
I am 24px large
<div style="font-size: 1.5rem">
I am 24px large
</div>
</div>
</body>
</html>
Что я хочу:
<html style="font-size: 16px">
<body style="font-size: 12px">
I am 12px large
<div style="font-size: 1.5em">
I am 18px large
</div>
<div style="font-size: 1.5rem">
I am 24px large
</div>
<template> <!-- Simulates that it is inserted into the DOM by using shadow elements -->
<style>
:root{ /* Or something like that */
font-size: 20px; /* This is the simulated "template root fontsize" */
}
</style>
<div style="font-size: 1.5trem"> <!-- Based on the template root fontsize -->
I am 30px large
<div style="font-size: 2trem">
I am 40px large
</div>
</div>
</template>
</body>
</html>
Это даст одно место (корневая часть вышеприведенного примера), чтобы управлять всеми относительными размерами шрифтов внутри этого компонента, а затем его можно объединить с не относительными размерами шрифта, такими как px или другими нормальными значениями css.