<template shadowroot="open">
По-моему это вообще только под флагом работает.
100% вариант (сам вчера писал виджет, который встраиваться должен на любой сайт) это кастомный элемент:
customElements.define('tag-name', class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' }).appendChild(rootElement);
}
}
);
И в разметке пишем так:
<tag-name>
<link rel="stylesheet" href="путь/к/стилям/этого/элемента.css">
<div class="container">Тут контент</div>
</tag-name>
Ну и сами стили:
:host .container {
color: red;
}
Если всё правильно сделано, то стили извне не влияют на разметку тега
tag-name.