javascript - Inserting HTML code without being affected by CSS and Jquery -

i want insert html code inside page, code insert should not affected css , js of page, should load it's own css , js.

example code:

<div class="body">   <p>example content </p>   <p>sample content 2 </p>   <div class="special-div">       <p> no css , js applied div 'special-div', should load it's own css , js </p>   </div><!-- /.special-div --> </div><!-- /.body --> 

in above code div class "special-div" should load it's own css , js , should not affected page's css , js

i've tried using iframes firstly cross origin, secondly iframe has it's own scroll bar.

i trying insert slider wordpress page, i've built slider in html site , tested default wordpress styles , js changing layout. can remove styles i'm not sure how rid of js affecting slider

any appreciate.

one way of doing shadow dom.

shadow dom provides encapsulation javascript, css , templating in web component. shadow dom makes these things remain separate dom of main document. can use shadow dom itself, outside of web component.