Почему размер шрифта > 0 добавляет дополнительную высоту веб-компоненту, известному как пользовательский элемент HTML? ⇐ Html

[Anonymous]

Я не могу заставить это работать во фрагменте, поэтому вот моя тестовая страница на моем сайте github: https://sidewayss.github.io/scratch/wc-bugs.html
Обратите внимание на верхнюю строку с надписью :, два прямоугольника. Это один и тот же тег пользовательского элемента с разными размерами шрифта. В левом прямоугольнике используется значение CSS по умолчанию: размер шрифта:0, в правом — размер шрифта:2rem. Разница в высоте между ними составляет 8 пикселей, что составляет 1/4 размера шрифта 32 пикселя. Если вы установите высоту 1rem, разница высот уменьшится до 4 пикселей.
Вот снимок экрана, где отступы элементов установлены на ноль, так что дополнительная высота легко видна:


Это шаблон:

Код: Выделить всё

Это , о котором идет речь:

Код: Выделить всё

<svg>:

span

Не так уж и много. В обоих случаях высота составляет 48 пикселей. Вся дополнительная высота находится в пользовательском элементе и в нижней части элемента.
Я могу воспроизвести это в последних версиях Chrome и Firefox в Windows 11. Почему установка размер шрифта больше нуля добавить высоту этому пользовательскому элементу? Это заставляет меня жестко установить размер шрифта:0 в CSS, иначе он имеет тенденцию наследовать что-то > 0.
Если это поможет, исходный код находится здесь, два файла: wc-bugs.html и wc-bugs.js

Подробнее здесь: https://stackoverflow.com/questions/793 ... om-element