Javascript 在不受CSS和Jquery影响的情况下插入HTML代码

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

示例内容

样本内容2

没有CSS和JS应用于这个div“特殊div”，它应该加载自己的CSS和JS

在上面的代码中，类为“specialdiv”的div应该加载自己的CSS和JS，并且不应该受到页面的CSS和JS的影响

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

---

我试图在wordpress页面中插入一个滑块，我在一个HTML站点中构建了一个滑块并进行了测试，但是默认的wordpress样式和JS正在改变布局。我可以很容易地删除样式，但我不知道如何摆脱影响滑块的JS

任何帮助都将不胜感激

一种方法是

shadowdom为Web组件中的JavaScript、CSS和模板提供封装。shadowdom使这些内容与主文档的DOM保持分离。您还可以在web组件之外单独使用阴影DOM

---

在css方面，您可以编写所有以.special div{//params here}等开头的规则。因此.special div p、.special div h1等。但是您需要在插入的html块中加载脚本。这将不是独立于页面的其余部分。这取决于你到底想做什么。听起来像是iframe有一个滚动条，你可以绕过它，但你必须使用一个设定的高度，或者计算iframe内容的高度，如果你知道的话。我正试图在wordpress页面中插入一个滑块，我在一个HTML站点中构建了slider并进行了测试，但是默认的wordpress样式和JS正在改变布局。我可以很容易地删除样式，但我不确定如何摆脱影响滑块的JS。在这种情况下，应该只是更新滑块的目标选择器的问题。我想无论如何。也许我们需要一个例子。