Shadow DOM / Web-компоненты в Ionic 4

Question

Я пытаюсь понять, как и где ionic 4 внедряет стиль для веб-компонентов в DOM. Меня не интересует его изменение с помощью переменных CSS, но я хочу иметь возможность проверить компонент и увидеть, откуда исходит стиль. Например, на https://ionicframework.com/docs/demos/api/alert/index.html?ionic:mode=ios

Если вы осмотрите кнопку:

Я могу видеть, что наложение применяется, но я могу 'Я не вижу, откуда берутся все стили, это не в пакете CSS, не в тегах стиля на странице, не непосредственно в элементе и не применяется к теневому корню. Обычно стиль хоста является частью компонента, например

Итак, где определяется стиль хоста и как / где он внедряется вDOM?

Answer 1

Так что я думаю, что Ionic 4 использует: https://developers.google.com/web/updates/2019/02/constructable-stylesheets

Именно поэтому стили не видны непосредственно в DOM. Благодарим Фрейзера за это.

Answer 2

Итак, насколько я знаю, все стили, которые вы применяете к своему компоненту, обычно устанавливаются innerHTML. Вы уже нашли тег стиля, который является первым тегом после компонента. Это очень полно стилей, как всегда, поэтому вы обычно видите только фрагмент. Это зависит от браузера, но чтобы увидеть все стили, вам, возможно, придется сделать двойной щелчок мышью на стили между тегами стилей.

Обычно, когдаЯ хочу прочесть что-то вроде этого и скопировать его в свой редактор и посмотреть там:

Как видите, все ваши стили определены там,Stenciljs также загружает некоторые общие стили, чтобы убедиться, что все выглядит правильно. Они создаются в вашей головной секции: