Inserting HTML code without being affected by CSS and Jquery

Question

I want to insert some HTML code inside a page, the code I insert should not be affected by the CSS and JS of that page, it should load it's own CSS and JS.

Example Code:

<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 -->

In the above code div with class "special-div" should load it's own CSS and JS and should not be affected by page's CSS and JS

I've tried using iframes but firstly they are cross origin, secondly iframe has it's own scroll bar.

I am trying to insert a slider into wordpress page, I've built slider in a HTML site and tested it but the default wordpress styles and JS are changing the layout. I can easily remove the styles but I'm not sure how to get rid of the JS which is affecting the slider

Any help would be appreciate.

Answer 1

One way of doing it is 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.