How to Isolate a DIV and its contents from external CSS

Question

I'm creating a chat widget that will inject a div to the body of his website. However, I don't want the div to apply CSS from default style sheet of the website.

Is there any way to isolate a div like this?

Most of the existing solutions needs to change CSS code in their website, which is not possible for me

Possible duplicate of [Disinherit (reset) the CSS style of a specific element?](https://stackoverflow.com/questions/9515534/disinherit-reset-the-css-style-of-a-specific-element) — Fred Gandt, Jul 12 '17 at 02:16
@FredGandt that is resetting. Resetting won't work in my case. Since there plenty of things in CSS. I want to isolate from others — Gijo Varghese, Jul 13 '17 at 04:02
@ChrisHappy Iframe is the best option so far. Bu the problem is the element that I want to insert will be always floating. If I use iframe, people can click/select elements behind it. — Gijo Varghese, Jul 13 '17 at 04:03
Possible duplicate of [How To Isolate a div from public CSS styles?](https://stackoverflow.com/questions/10064172/how-to-isolate-a-div-from-public-css-styles) — Elias Zamaria, Sep 18 '19 at 23:48

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

Shadow DOM

The feature(s) of the Shadow DOM v1 currently (constantly subject to change) have growing support, offering a wealth of possibilities, including scoped CSS.

Shadow DOM v0 was implemented in Chrome/Opera but other browser vendors are implementing v1.
MS Edge status: Under Consideration
Firefox status: in-development

From Google Developers: Shadow DOM v1: Self-Contained Web Components:

Hands down the most useful feature of shadow DOM is scoped CSS:

CSS selectors from the outer page don't apply inside your component.

Styles defined inside don't bleed out. They're scoped to the host element.

CSS selectors used inside shadow DOM apply locally to your component. In practice, this means we can use common id/class names again, without worrying about conflicts elsewhere on the page. Simpler CSS selectors are a best practice inside Shadow DOM. They're also good for performance.

Below, we attachShadow to a new createElement( "div" ) to which we apply the style.all = "unset" to disinherit all the rules applied to the rest of the document's divs.

We then fill our shadow-root with whatever content we like, and supply any styles desired, before appendChild( "new_div" ) injects our content into the body.

The result is stylistically isolated content.

const new_style = document.createElement( "style" ),
      new_div = document.createElement( "div" ),
      new_p = document.createElement( "p" ),
      shadow = new_div.attachShadow( { mode: "open" } );

new_style.textContent = `p {
  padding: 1em;
  border-radius: 1em;
  box-shadow: 2px 2px 15px 5px rgba( 0, 0, 0, .5 );
}`;
shadow.appendChild( new_style );

new_p.textContent = "Shadow DOM FTW \\o/";
shadow.appendChild( new_p );

new_div.style.all = "unset";
document.body.appendChild( new_div );

body {
  background: antiquewhite;
}
div {
  background: cornflowerblue;
  border: 2px grey solid;
  border-right: 0;
  border-left: 0;
  margin: 2em;
}
p {
  font-family: "Comic Sans MS";
  margin: inherit;
}

<body>
  <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</body>

That looks promising. I've heard about scoped CSS. But what about the browser support? — Gijo Varghese, Jul 13 '17 at 14:57
I provided a link to caniuse.com's info at the top of the answer. — Fred Gandt, Jul 13 '17 at 22:00
I just checked. Only supporting in Google Chrome, all others, even Firefox don't support it :( — Gijo Varghese, Jul 14 '17 at 01:16
Actually it is currently supported in Chrome, Safari, Opera, iOS Safari, Android Browser and Chrome for Android, with support in Firefox in development, and support in Edge being considered. — Fred Gandt, Jul 14 '17 at 01:42

score 0 · Accepted Answer · answered Feb 21 '20 at 01:56

0

Shadow DOM with scoped CSS seems to be a good solution. However, it's still not production-ready, lacks browser support.

I ended up using Cleanslate CSS. It adds an extra ~20KB CSS. But do the job really well. Support all browsers too.

answered Feb 21 '20 at 01:56

Gijo Varghese

11,264
22
73
122

score -2 · Answer 3 · answered Jul 12 '17 at 03:12

-2

im not sure if this is what you seek for. but you can inject a link and point it, on desired css that targets the div that is to be inserted to the website...

answered Jul 12 '17 at 03:12

Keith Santiago

1
2

is it possible for you to inject iframe as well? – Keith Santiago Jul 12 '17 at 07:57
I've thought about iframe. But the problem is no element underneath iframe cannot be selected or clicked. – Gijo Varghese Jul 12 '17 at 09:33
i try to work it around when i get home. but for now this link might give you an idea [link](https://stackoverflow.com/questions/19673398/inserting-script-and-link-tag-inside-the-header-tag) – Keith Santiago Jul 12 '17 at 10:57

How to Isolate a DIV and its contents from external CSS

3 Answers3

Shadow DOM