Я использую Stencil JS для создания диаграммы в SVG.
У меня есть функция TypeScript, которая определяет, какие элементы SVG должны быть включены в SVG, устанавливает соответствующие параметры для этих элементов и возвращает JSX.
Когда JSX отображается на экране, некоторые элементы не отображаются.
Странно то, что, если я открываю консоль и проверяю элементы, я вижу, что все они есть.
Если я скопирую элемент SVG целиком и вставлю его в другой контекст - я смогу увидеть все элементы так, как я ожидал.
Итак, я знать, что элементы «есть» как в возвращенном JSX, так и в DOM - просто по какой-то причине они не отображаются.
На первом снимке экрана ниже - вы можете увидеть один элемент, который видимый.
На втором скриншоте - вы можете видеть, как я выделяю другой элемент, который также находится в DOM, но не видим.
Вы видите, что нет очевидной разницы (например, нет по-разному). Просто браузер, похоже, не распознает его как элемент DOM.
Как будто Stencil берет некоторые элементы из JSX и вставляет их в DOM, но не другие. Ошибки не отображаются нигде.
Есть идеи, почему это происходит?
Снимок экрана 1 - видимый элемент:
Скриншот 2 - «отсутствующий» элемент:
