插入HTML代码而不受CSS和Jquery的影响

Question

我想在页面中插入一些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 -->

在上面的代码div中，类“special-div”应该加载它自己的CSS和JS，不应该受页面的CSS和JS的影响

我尝试过使用iframe，但首先它们是交叉原点，其次iframe有自己的滚动条。

我试图在wordpress页面插入一个滑块，我在HTML网站上构建了滑块并对其进行了测试，但默认的wordpress样式和JS正在改变布局。我可以轻松删除样式，但我不知道如何摆脱影响滑块的JS

任何帮助都会受到赞赏。

Answer 1

这样做的一种方法是Shadow DOM。

  

Shadow DOM为Web组件中的JavaScript，CSS和模板提供封装。 Shadow DOM使得这些东西与主文档的DOM保持独立。您也可以在Web组件之外单独使用Shadow DOM。