我想在页面中插入一些 HTML 代码，我插入的代码不应受该页面的 CSS 和 JS 影响，它应该加载它自己的 CSS 和 JS。
示例代码:
<div class="body">
<p>Example Content </p>
<p>Sample Content 2 </p>
<div class="special-div">
<p> No CSS and JS to be applied to this div 'special-div', it should load it's own CSS and JS </p>
</div><!-- /.special-div -->
</div><!-- /.body -->
在上面的代码中，带有类“special-div”的div应该加载它自己的CSS和JS，并且不应该受到页面CSS和JS的影响
我试过使用 iframe，但首先它们是跨源的，其次 iframe 有它自己的滚动条。
我正在尝试将 slider 插入 wordpress 页面，我在 HTML 站点中构建了 slider 并对其进行了测试，但默认的 wordpress 样式和 JS 正在更改布局。我可以轻松删除样式，但我不确定如何删除影响 slider 的 JS
如有任何帮助，我们将不胜感激。
最佳答案
一种方法是 Shadow DOM .
Shadow DOM provides encapsulation for the JavaScript, CSS and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.
关于javascript - 插入 HTML 代码不受 CSS 和 Jquery 的影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30189435/