Веб-компонент, наследующий родительские стили даже со всеми: начальным набором ⇐ Html

[Anonymous]

MVCE
Вы можете выполнить этот фрагмент кода:

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

const a = document.createElement("div");

// display big red rectangle in top left
a.style.position = "absolute"; a.style.left = "10px"; a.style.top = "10px";
a.style.background = "red";
a.style.color = "green";
a.style.fontSize = "large";
document.body.appendChild(a);

// attach shadow root
a.attachShadow({mode: 'closed'}).innerHTML = `

:host {
all: initial;
display: block;
}



A paragraph element which should not inherit any styles from its parent webpage (outside the shadow DOM).
`;

Описание
Я дословно скопировал раздел теневого корня из lamplightdev, но тот же код также приведен в различных потоках Stack Overflow. Из-за этого кода элемент НЕ должен наследовать какие-либо стили от своего родительского тела.
Проблема
Вы можете запустить фрагмент кода и увидеть, что элемент абзаца отображается зеленым цветом с большим размером шрифта, что неожиданно, поскольку я установил :host { all: Initial; .
В DevTools я также вижу, что элемент абзаца отображает правила стиля, «наследованные от элемента div», который находится за пределами моего веб-компонента.
Вопрос
Я хочу, чтобы мой веб-компонент не наследовал стили родительской страницы, но почему он это делает?

Подробнее здесь: https://stackoverflow.com/questions/696 ... nitial-set