javascript - 将 html 注入(inject)现有页面而不受 css 影响

Question

我需要在现有页面中注入(inject)一些 html 内容，而不受页面 css 的影响

我搜索并找到了一个叫做 shadow dom 的东西

当我尝试应用解决方案时，发生了错误

<script type="text/javascript">
        var host = document.querySelector('#content');

        var shadowRoot = host.createShadowRoot();

    </script>

Uncaught TypeError: Cannot read property 'createShadowRoot' of null

Answer 1

Element.createShadowRoot() 已被弃用，取而代之的是 Element.attachShadow()。

您可以使用:

// Get content
var content = document.querySelector('#content');

// Create shadow root
var shadow = content.attachShadow({mode: 'open'});

// Create text node
var text = document.createElement('span');
text.textContent = "hello";

// Append it to the shadow root
shadow.appendChild(text);