I wanted to clarify whether animations from global scope should work under ShadowDOM.
Meaning, I have class that penetrated across ShadowDOM, but animations from it doesn't work on any element under ShadowDOM.
If I add animations directly under element - everything seems to work fine.
Working: http://jsbin.com/doqotexuzi/edit?html,output
Doesn't: http://jsbin.com/rutojemoli/edit?html,output
(examples needs native ShadowDOM support, works in Chromium)
The /deep/ shadow-piercing selector was removed as of Chrome 63. You can easily accomplish the same in your example by styling the x-hi element, since it's direct child will inherrit, or by linking to a stylesheet used in the light DOM.
Related
As pointed out here:
Because of the isolation of styles, which is a feature of Shadow DOM, you cannot define a global CSS rule that will be applied in the Shadow DOM scope.
Is there any way to define simple CSS classes globally in some global styles.css file (for example) that we can use in all kinds of places and re-use them in individual components?
Currently, the simple answer would be to add a corresponding <link href="styles.css"> tag to every single component that we define. This has been proposed here to allow web components use bootstrap classes, and again here to support ionic. Is that a good approach? Would that not be terrible performance-wise, if we included big styles.css in tens or hundreds of components?
Constructable Stylesheets are a proposal to solve exactly that problem.
In a nutshell, it's a way to share the same stylesheet across components without requesting the stylesheet each time. Currently it's Chrome only, but there is a polyfill, and, Firefox at least, seem to support this proposal.
Maybe it could help you. From this link
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
You have the following:
Internal versus external styles
In the above example we apply style to the Shadow DOM using a
element, but it is perfectly possible to do it by referencing an
external stylesheet from a element instead.
For example, take a look at this code from our
popup-info-box-external-stylesheet example (see the source code):
// Apply external styles to the shadow dom
const linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'style.css');
// Attach the created element to the shadow dom
shadow.appendChild(linkElem);
Note that elements do not block paint of the shadow root, so
there may be a flash of unstyled content (FOUC) while the stylesheet
loads.
Many modern browsers implement an optimization for tags either
cloned from a common node or that have identical text, to allow them
to share a single backing stylesheet. With this optimization the
performance of external and internal styles should be similar.
To make it as independent and modular as possible, I would propose something like that:
let myStyles = querySelector('rel[href="style.css"]');
shadowDOM.appendChild(myStyles);
Normally, you don't have another option except of adding the styles directly to the shadow DOM.
I'm working with React 16 and Emotion 10.0.7. The Emotion library is a CSS-in-JSS library one can use with React used to style components. I've got them working together and styling components. For the most part my CSS is being respected as "more specific" and overwriting other CSS as one would expect.
I'm trying to remove :focus outline from a button. I know this is frowned upon but I have been asked to do it for a work project.
My question is this. I have specified 'outline: none' in my Emotion CSS mark-up at the component level. This gets translated into a class and the :hover pseudo-selector is applied to the class and then overwritten (I can see the strikethrough in Chrome Dev Tools) by the apparently "global" :focus selector in Chrome.
I am calling the pictured selector the "global" :focus selector for lack of a better term. Usually there is an indication of where the CSS is coming from (user agent, , some_file.css, etc) but here the top-right corner of the box is empty.
Is this a global Chrome selector for the :hover pseudo-class? Can I overwrite it or bypass it somehow? global_hover_selector_chrome
This answer mentions that /deep/ can be used to select elements across shadow DOM boundaries. However, I already have a stylesheet from a theme my client bought. Is it possible to make the selectors in the stylesheet work across shadow DOM boundaries without changing the stylesheets themselves? Other places suggest using applyAuthorStyles but this appears to be removed from the shadow DOM specification.
Since /deep/ and ::shadow selectors have been deprecated and you don't want to modify existing stylesheet anyway, I'd suggest you to use css #imports in your component templates(which I am assuming you'll be cloning and using as shadow roots) to include this external stylesheet.
This will essentially make this style local to your components and will be available inside shadow-dom.
If you are worried about performance implications, see this answer on same.
tl;dr;
With browser caching, there's essentially no penalty to so many
imports, in fact it is likely faster than cascading the styles through
multiple shadow trees using piercers.
So I have had the unpleasant of adopting a project... Anyway, there is a div on the site that displays some information, and for some reason there is an embedded style somewhere that is causing it to display: none; I used Google Chrome's Web Developer plugin to disable all embedded styles and it works fine then. As I inspect the element I can see the style that is causing it, but when i try and disable the CSS property display, it disables but doesn't create that strike-through on the property. I implicitly put an inline style of display: block !important; and still no good. There also doesn't seem to be any reference to a location where that style comes from, doesn't say User Agent Stylesheet, not a reference to any other stylesheet.
The funny thing is, IE it works fine. The div shows perfectly... Firefox, and Safari cause the same problem which led me to think it might actually be a WebKit bug. Just need some more light on this maybe?
Found it. The div's class was advert_container and one of my my browser plugins was AdBlock and this caused the div to be removed...
Were you referencing this display:block !important, inline with the html element, or in some style sheet somewhere?
The closer the CSS attribute is to your problem div this should apply this. Also referencing !important generally overrules other CSS attributes, however if the other CSS attribute is more specific, it could also be the reason why this is getting overruled.
If you are in developer tools, and get the intended effect, you should just copy the css it created, and paste that in your html page.
I am trying to do a hover->highlight effect on the cells of the table in this fiddle, so they will appear to look like buttons. I can't use any javascript or CSS, but I can use HTML5. Does anyone know how to do it. I know there is an onmouseover attribute in HTML5, just not much experience yet.
Thanks!
You can't. If you want to change the appearance of a given element based on user's behavior you have to use JavaScript (event based) or the CSS pseudo class :hover.
However, if you can edit the HTML of your content, then you should be able to insert a custom <style> element or add event listeners. Note that the first isn't valid in HTML4*, in HTML5 you can use the scoped attribute to style only a given scope (but I don't think this behavior is implemented in any browser yet).
*This solution should work, even if the resulting code HTML4 isn't valid any more.