protecting a ShadowRoot element - javascript

I am working on a web extension that adds a custom overlay element to any website. naturally I don't want the websites CSS and JavaScript to interfere with my custom element, nor do I want to influence the appearance of any websites in any way other than with my overlay.
So naturally I turn to Shadow DOM. I soon learn that I can't simply attach my shadow DOM to document.body since this will displace the whole page.
It turns out I need one regular element in the body to act as a shadow root:
const shadowHost = document.createElement('div');
document.body.appendChild(shadowHost);
const shadow = shadowHost.attachShadow({mode: 'closed'});
But how can I protect this shadow root from being influenced by the css or js of the website?

What have you tried?
shadowRoots are not styled by global CSS, unless they are inheritable styles
https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
mode:"closed" has nothing to do with CSS, it just doesn't publish the shadowRoot in element.shadowRoot, making it impossible to access the shadow DOM from the outside.
When the mode of a shadow root is "closed", the shadow root’s implementation internals are inaccessible and unchangeable from JavaScript—in the same way the implementation internals of, for example, the <video> element are inaccessible and unchangeable from JavaScript.
document.body
.appendChild(document.createElement('div'))
.attachShadow({mode:'closed'})
.innerHTML = `<style>h1{color:green}</style><h1>Hello</h1><h2>Component</h2>`;
<style>
body {
/* inheritable styles do style shadowRoots */
font: 10px Arial;
color: red;
}
</style>

Related

How can I disable all CSS that can affect my widgets on another website?

I'm building JavaScript widgets that are supposed to be added onto other people's websites.
I style my widgets by dynamically adding a CSS to the pages they're on.
For example,
My CSS code below applies to a DIV inside my widget:
.myWidget { background-color: red; }
But a CSS file outside my own on a remote page might have:
div { border: 5px solid green; }
The CSS above would also apply to my widgets. How can I disable all other CSS outside my own?
Thanks
You could be Using shadow DOM
Shadow DOM MDN Web Docs
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.
You can use the all shorthand property and the unset keyword to set each property's value to its initial value.
.myWidget {
all:unset;
background-color: red;
}
div {
background-color:yellow;
}
<div class="myWidget">Hello World!</div>

Is it possible to stop inheriting CSS within shadowDom from HTML tag?

Im injecting some Javascript that creates an isolated div located at the top of the body. Within this div there is a shadowDom element. The reason I went with shadowDom is because I thought it stoped CSS from bleeding in to all the divs within the shadowDom. But I can clearly see that it is inheriting style from the tag(font-size: 62.5%;). This is causing my text to be smaller. I can override this with adding font-size: 100% !Important but even though it crosses it out in the inspector tools it does not actually change. The only way I can get it to work is by unchecking the box in the CSS portion.
Please Help
Thanks,
Dev Joe
HTML Shadow Dom IMAGE
CSS Checked IMAGE
CSS Unchecked IMAGE
You should not use a relative font size (like 100%) because it applies to inherited size... so this will have no effect.
Insead, you should define a rule to the :host CSS peudo-class:
:host {
font-size: initial ;
}
NB: You'll need to add !important only if the font-size defined in the container (the main document) applies to the host element directly.
NB #2: You can use all: initial instead but you cannot combine it with !important.
host.attachShadow( { mode: 'open' } )
.innerHTML = `
<style>
:host { all: initial }
</style>
Inside Shadow Root <br>
<div>Div in Shadow DOM</div>
<slot></slot>
`
body { font-size : 62.5% ; color: red }
Small Font
<div>Div in main Document</div>
<div id=host>Light DOM</div>
No need for shadow dom, just use the all attribute to disable the inheritance.
#myElement {
all: initial;
}

ShadyCSS polyfill not properly handling CSS in Edge

I am building a widget for third-party websites, using shadow DOM to prevent their CSS from interfering with ours. I am using the ShadyDOM and ShadyCSS polyfills to make it work in Edge and IE, but it is not transforming the CSS for the shadow DOM as I would expect.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM test</title>
</head>
<body>
<div id="container">container is here</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<script>
const shadow = document.getElementById("container").attachShadow({ mode: "open" });
const style = document.createElement("style");
style.innerHTML = `
:host .stuff {
background: #ff00ff;
}
`;
shadow.appendChild(style);
const div = document.createElement("div");
div.classList.add("stuff");
div.innerHTML = "stuff inside shadow dom";
shadow.appendChild(div);
</script>
</body>
</html>
In Chrome (which supports shadow DOM natively), the stuff div has a pink background, as I would expect. But in Edge (which does not support shadow DOM natively), I see the "stuff inside shadow dom" text (meaning my script ran and the ShadyDOM functions worked), but I don't see the pink background.
Why is this happening? I am attaching a shadow root to a plain old div, instead of using custom elements as the example in the ShadyCSS README does, but does that matter? If so, how can I make this work? I am working on a big, existing app, and not wanting to make too many changes at once, so I would strongly prefer to use the standard HTML elements I am already using (divs, buttons, etc.) instead of coming up with my own elements or templates, although I would be willing to consider templates and/or custom elements if it can be done easily, without having to make a lot of big changes.
With ShadyCSS
:host CSS pseudo-element is not known in Edge.
To make it work, you should use ShadyCSS.prepareTemplate() that will replace :host by the name of the custom element and define the style as a global style that will apply to all the page.
Remember that there's no Shadow DOM in Edge: there's no boundaries/scope for CSS with a fake/polyfilled Shadow DOM.
In your case you could use ShadyCSS.prepareTemplate( yourTemplate, 'div' ) as in the example below:
ShadyCSS.prepareTemplate( tpl, 'div' )
container.attachShadow( { mode: "open" } )
.appendChild( tpl.content.cloneNode(true) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<template id=tpl>
<style>
:host .stuff {
background: #ff00ff;
}
</style>
<div class=stuff>stuff inside shadow dom</div>
</template>
<div id=container>container is here</div>
Note: since the polyfill will replace :host by div and add it as a global style, you could observe some side effects if you have another HTML code part that matches div .stuff.
Without ShadyCSS
ShadyCSS was designed for Custom Elements, but not really for standard elements. However, you should get inspiration from the polyfill and create explicitely the styles properties for fake (polyfilled) Shadow DOM. In your case replace :host with div#containter:
container.attachShadow( { mode: "open" } )
.appendChild( tpl.content.cloneNode(true) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<template id=tpl>
<style>
div#container .stuff {
background: #ff00ff;
}
:host .stuff {
background: #ff00ff;
}
</style>
<div class=stuff>stuff inside shadow dom</div>
</template>
<div id=container>container is here</div>

How do I escape a style for specific elements in html? [duplicate]

Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the default value?
Example:
CSS:
.navigation input {
padding: 0;
margin: 0 30em;
}
HTML
<div class="navigation">
Some text: <input type="text" name="one" />
More text: <input type="text" name="two" />
<!-- The next input, I want it to be as browser-default -->
<div class="child">
<input type="text" name="three">
</div>
</div>
Here, by browser-default I mean I want it to look exactly as if no CSS at all was applied to that element.
Here I'm using an input element as an example, but I'm talking about any kind of element. I'm not asking how to set different CSS attributes to that specific element, I'm asking how to reset it to its defaults.
Different elements have different default attributes like padding when they are not set. For example, a button that has a padding of 0 in CSS will wrap its text without any space. You can later set its padding to another value, but how would you set it to the default padding?
Thanks in advance for any comments!
in your case you can use that :
.navigation input {
all: initial;
}
it will revert all attibutes of your input to initial value.
source :
http://www.w3schools.com/cssref/css3_pr_all.asp
CSS 4 CR has a provision for the revert keyword for values. It looks like intended for the exact purpose in the question and might be used like this:
.navigation input {
all: revert;
}
Still its browser support is not very impressive for the time of writing...
If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.
Few Examples
Meyer Web
HTML5 Doctor (CSS Reset With HTML5 Elements Included)
If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example
div {
color: red;
font-family: Arial;
}
div p {
/* Here it will inherit the parents child unless and
until you re specify properties with different values */
}
You cannot set an attribute to the default value, since the defaults are browser-dependent and cannot be referred to in CSS. Cf. to How to set CSS attributes to default values for a specific element (or prevent inheritance)
On the other hand, your example sets padding and margin, which are not inherited. So the question seems to be how to prevent your own CSS rule from applying to some specific element. Then the answer is that you need to modify the selector of the rule so that the specific element does not match it. In your case, this could be done by changing the selector to
.navigation > input
But the more complicated the markup and the style sheet are, the more difficult it becomes to restrict the effects that way.
The QUICK answer is to use the following CSS to revert your select HTML element back to the browsers default UA style sheet, or whatever is set in the body element:
.navigation input {
all:revert;
}
What Are your Trying to Default to?
Every browser by default comes with a default UA style sheet that applies styles to all HTML elements. HTML is unstyled by default. But as you add more styles to your web pages, through selectivity and cascade you write over many of these native default styles. Often that is ok, as you improve upon the browser's styles or alter them to fit your page design.
But know that the browser's default UA style sheet is usually the default. For example, the element "blockquote" is usually interpreted by most browser style sheets with a standard set of CSS formatting values close to the following:
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
However, this formatting is not always consistent between browsers. Each browser designs the HTML elements differently. That means each browser's default is not YOUR default or what you would like or expect. You want consistency, right?
To solve that problem, some people have started creating "reset css sheets" with custom values to layer over the browser's default styles and align all the browsers to the same formats. These sheets do this before applying custom CSS on top of that for specific web projects.This creates a "universal custom style" that overrides the browsers default styles, so all your projects, all your web pages, and all versions of browser start out with a base-level look-and-feel.
But there are problems with this.
Bootstrap, the popular 3rd party CSS vendor solution, creates its own "reboot" sheet to reset HTML elements and override the browser's sheets. But these "reset" styles are incomplete, so add more complexity as to what is the default. In doing so, they subjectively assume everyone expects elements to look like they want, which creates a mess in the case of Bootstrap's reboot "blockquote" style shift, which changes default critical margins like so:
From the Bootstrap 4.0 reboot sheet:
blockquote {
margin: 0 0 1rem;/* top, right-left, bottom */
}
This Bootstrap fix that comes in all Bootstrap downloads fails as it strips the critical left-margin formatting that defines blocked quotes in scientific journals and adds one at the bottom. Bad design! In addition, older browsers don't know what "rem" is, so this solution would fail in a wide range of legacy browsers. It isn't just the custom styles in Bootstrap that's the issue. It is the overall CSS design that fails. Too many legacy browsers will fail to accept these Bootstrap proprietary styles, too many elements are missing from their sheets, its extremely difficult to erase them, and its often too difficult to go back to the browser's try default style sheet.
So, now that you understand all the variable involved, how do you manage all this? To try and return to a "default" you really need to understand how best to manage all these CSS systems in a way that is easy, comprehensive, and complete.
A Better Solution
In general, it is always better to consider the browser's default UA style sheet as the default, uncorrupted by any custom CSS you add later to the page. Then, because each browser is different, its best to use a comprehensive "reset" sheet that truly affects all HTML elements and works in a wider range of old and new browsers so it alters everyone's HTML. When done correctly, such sheets layer over the browser's default sheet correctly, but also apply custom CSS to the body element such that when you later use all:revert, the default goes back to the browser's default CSS style sheet, but includes some critical layout and font styles applied in the body element that affect the overall style and which do not get erased in your "reset" sheet.
Why? Because reverting back to defaults also includes whatever text or other inheriting CSS properties you added to the parent body tag. This allows you to not just honor the browser's default styles, but shift all the browser's to use the same body element text inheritance styles.
So, what I recommend when building CSS systems in web page design is the following:
Avoid Bootstrap, or at least turn off its "reboot" system as it is not complete and fails in too many legacy browsers.
Write or install your own HTML reset CSS system that changes all HTML design to a clean universal design all known browsers can share. This way they all start out looking the same, and the body element carries some critical text inheriting features you can revert back to.
When needing to revert back to a CSS default style on any element, simply use all:revert, which will reset styles on any element back to either your "reset" style sheet properties inherited from the body tag or go up the tree and back to the browser's default UA style sheet. Again, this will return your element's style properties back to either the browser's default UA style for the element or to the body tag's styles. If your "reset" sheet has carefully applied inheriting text styles to all browsers on the body element, they will be part of your element's default values you can revert to.
Note: Many web browser's do not support all:revert (Like Internet Explorer). So I recommend you combine all:revert with initial and inherit to force resets on some properties in older browsers.
The solution above will force all CSS in most modern browsers built today back to the original browser's defaults on an element-by-element basis. By using your own reset sheet, all the browsers will have the same default style on the body element which all child elements inherit. It means when you revert back an element, its default will include your browser's default styles but also any text-inheriting styles added to the body tag all child elements inherited.
Unfortunately, there's few good "reset" sheets online that do this well, combining your browser's default UA style sheet with your reset sheet. Very few have been carefully designed to reset CSS on elements for every browser known and all known versions, as well. You could write your own. Here is a very good CSS system you can use that does this for you I recommend: Universal CSS Framework
I think some of these should work:
/* Valeurs avec mot-clé */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Valeurs globales */
clear: inherit;
clear: initial;
clear: unset;
sources :
toast rm -rf/*
lmgtfy : "css3+clear" on any search engine
https://developer.mozilla.org/fr/docs/Web/CSS/clear
You can use unset,
say you want to set border color to browser default
.navigation input {
padding: 0;
margin: 0 30em;
border-color: unset;
}
this will unset the style inherited from other classes.

:target css selector not working in polymer

I'm using Polymer and I noticed that the :target css selector doesn't work.
For example
<polymer-element name="my-element" noscript>
<template>
<style>
:target {
border: 2px solid red;
}
</style>
<div id="test">This is a :target test</div>
</template>
</polymer-element>
Click me
<my-element></my-element>
DEMO
Any suggestions how I can fix this ?
I must admit: I'm not very familar with shadow DOM and absolutely not familar with Polymer but I'd like to tell you my view on this because your intention looks somewhat strange to me and this is too long for a comment.
Short
You can't use the pseudo selector :target within a shadow host.
Long
Unfortunately I was not able to find clear evidences in these resources
http://www.w3.org/TR/shadow-dom/
http://dev.w3.org/csswg/css-scoping/
but some hints...
The goal of Web Components was to give us the ability to build individual and isolated components that can be used in a document without caring of their inner function or style.
If a component could directly reach the "outside" document or if the outside document could reach any shadow hosts element directly, this would completely break the intention of Web Components.
Imagine what would happen if you insert two instances of your <my-element>. Both contain the same ID, which one should be targeted?
Of course it's possible to reach the shadow document, or the containing document from within the shadow document, but only through ::shadow or :host respectively.
To me its logical that the browser can't select elements using a mere :target selector since the target is the matter of the document (it's URL is targeted to some ID) not of any shadow DOM. It's also not possible to reach a shadow tree node with document.getElementById() from within the container document.
The CSS scoping spec which also adresses the Shadow DOM concepts states:
Why is the shadow host so weird?
The shadow host lives outside the shadow tree, and its markup is in
control of the page author, not the component author.
It would not be very good if a component used a particular class name
internally in a shadow tree, and the page author using the component
accidentally also used the the same class name and put it on the host
element. Such a situation would result in accidental styling that is
impossible for the component author to predict, and confusing for the
page author to debug.
(3.1.1. Host Elements in a Shadow Tree)
I'd say this is another evidence: the shadow host (viewed from outside) itself will keep the active (focus) state while handling the focus inside its tree.
To maintain encapsulation, the value of the Document object's focus
API property activeElement must be adjusted. To prevent loss of
information when adjusting this value, each shadow root must also have
an activeElement property to store the value of the focused element in
the shadow tree.
(6.3 Active Element)
One possible solution to your problem
If your intention was to highlight only the div, when your shadow element is :targeted this might be the correct style within your shadow document:
<polymer-element name="my-element" constructor="" attributes="">
<template>
<style>
:host(:target) #inner {
color: #0c0;
}
</style>
<content>Hello World!</content>
<div id="inner">This is a :target test</div>
...
It will highlight the <div> with green text, when your shadow element <my-element id="outer"></my-element> is targeted by #outer.
If this was not your intention and you really wanted to be able to target #inner from outside, I'd say this is not possible (see the "longer" part ;).
I don't think it's a good idea to link to elements inside shadow dom, because you may have multiple instances of the outer element in same page so you'll get multiple elements with same id.
However when you request a url with #elementId the browser will only look in light dom for the according element.
If you still need to style shadow dom elements you could simulate :target selector:
<polymer-element name="my-element" constructor="" attributes="">
<template>
<style>
#inner[target] {
border: 2px solid red;
}
</style>
<content>Hello World!</content>
<div id="inner" target?="{{innerTargetted}}">This is a :target test</div>
</template>
<script>
Polymer('my-element', {
ready: function() {
$(window).on('hashchange', function() {
this.innerTargetted = window.location.hash == '#inner';
}.bind(this));
}
});
</script>
</polymer-element>
Demo.

Categories