I was experimenting with Eric Bidelman's <fancy-tabs> shadow dom example: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
And was trying to add Material Design styling to it, which would require adding an :after pseudo element to the tabs.
After some experimentation I found that the internal styles for applying pseudo elements do appear to work when using Polymer, but not when using vanilla JS...
Polymer example:
https://jsbin.com/maqaze/edit?html,output
Vanilla JS example:
In this second example, applying the :after pseudo element does not work within the shadow dom <style> it apparently needs to be set externally.
https://jsbin.com/toxalu/edit?html,output
So my question is, how should you go about adding a pseudo element to a slotted / light dom element, without needing to use external styles?
(have tried these examples on Chrome and Safari)
If it seems to work in Polymer it's due to the fact that Polymer 1.0 doesn't really use native ::slotted pseudo-elements.
In fact Polymer uses native Shadow DOM "v0" and converts ::slotted to ::content. You can see it in the Dev Tools.
As you have noted you can add ::after pseudo-elements from the outside.
I suppose pseudo-elements are considered as complex selectors and therefore are not supported within ::slotted().
Related
Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification?
It's pseudo-class vs pseudo-element distinction.
Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons.
Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.
(And also states of actual elements like :hover and :focus.)
Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.
Actually, better description here: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Also here: http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/
CSS Selectors like ::after are some virtual elements not available as a explicit element in DOM tree. They are called "Pseudo-Elements" and are used to insert some content before/after an element (eg: ::before, ::after) or, select some part of an element (eg: ::first-letter). Currently there is only 5 standard pseudo elements: after, before, first-letter, first-line, selection.
On the other hand, there are other types of selectors called "Pseudo-Classes" which are used to define a special state of an element (like as :hover, :focus, :nth-child(n)). These will select whole of an existing element in DOM. Pseudo classes are a long list with more than 30 items.
Initially (in CSS2 and CSS1), The single-colon syntax was used for both pseudo-classes and pseudo-elements. But, in CSS3 the :: syntax replaced the : notation for pseudo-elements to better distinguish of them.
For backward compatibility, the old single-colon syntax is acceptable for pseudo-elements like as :after (browsers still all support the old syntax with one semicolon). Only IE-8 doesn’t support the new syntax (use single-colon if you want to support IE8).
I should start off by saying that I don't really have an issue that I'm trying to work through. I just had an interesting thought about how Shadow Dom and the CSS3 :target selector might / should / currently do work together.
I know that HTML specification says that there should only ever be one element with a particular ID value in a valid HTML document. But when we start using webcomponents with shadow dom we could very easily find ourselves using multiple elements with the same ID. This is especially true when we use the same component multiple times in the same page. So the question that I have is this: what should happen to an element inside a shadow dom region that has an ID value which matches the current hash and which is styled with a :target rule?
For example, if I wrote a webcomponent (my-element) that contained
<style>
#debug {display:none}
#debug:target { display:block; background-color:yellow; border 2px solid red; }
</style>
<div id="debug">some debug data</div>
What should happen to all the instance of my-element that I put on a page and navigated to #debug on? Should the debug element in each component show? Should none of them show? Should only the first element's debug div show (the same one I'd expect the browser to try and navigate to)?
My opinion is that if the page does not have an element with an ID=debug value that no scrolling navigation should appear on the page. As shadow dom is isolated from the rest of the page's styles the browser shouldn't try to navigate to such an element nested in shadow dom. Each my-element instance should be able to see the current page's URL though and should apply any matching :target rules, such that each my-elements' debug div should be visible.
If this were the case it would make for some interesting possibilities for sharing page state across all components, such as the debug example above. However, I doubt that is how Chrome is currently implementing things. And I'm pretty sure this Shadow Dom polyfill isn't going to handle things correctly as it basically shoehorns everything into the page's Dom tree and that would break the html specification.
Just curious if anyone has an answer for how this should work and how it works today...
(edited from my pc to add formatting... hard to do from my phone)
I think you can see the shadow DOM like a nested document. CSS can't address elements inside the shadow DOM from the outside (previously existing shadow piercing CSS selectors were deprecated).
This also encapsulates ids and therefore multiple components that contain elements with an id won't cause collisions or duplicates.
If you have the CSS with the :target selector inside a components style, it should be able to address the element with the matching id, otherwise it shouldn't.
So the question that I have is this: what should happen to an element
inside a shadow dom region that has an ID value which matches the
current hash and which is styled with a :target rule?
Adding to Günter Zöchbauer above answer an alternative is to use the Custom Element object when the style is encapsulated, if the style is global it will work just fine. Use the define method to create a custom component as shown in the the docs. This will not encapsulate your elements so be aware that your styles can be shared across files.
So instead of doing this:
const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild(pTag)
Use this:
this.appendChild(pTag);
both previous examples suppose you're in a HTMLElement class or a class that inherits it.
On an asp control I have an html element that has a css style applied to it using a ::before pseudo element.
Sometimes depending on some variables that are determined in the code behind of the control I don't want that ::before style to be applied.
How can I accomplish this, since the ::before element is not an actual element on the page?
Thanks
One content (:after for box and :before for arrow) property for data-tooltip and I want another content property for the field icon using custom icon fonts like fontello or fontawesome. How can I achieve this.??
If you're asking whether it's possible for an element to have more than one :before or :after pseudo-element at a time, that's not possible in CSS2.1. The reason is twofold:
Any element can only have exactly one :before or :after pseudo-element at a time due to cascading rules. See this answer for details.
Even if an element could have more than one of each kind of pseudo-element, the browser wouldn't know how exactly it should lay all of them out in the formatting structure. This can be worked around by having CSS offer a way to specify multiple pseudo-elements or nest pseudo-elements within other pseudo-elements, but neither of these ideas have been implemented.
If you need a complex structure that cannot be achieved with a single element with one :before and one :after pseudo-element, you will need to modify your HTML to accommodate this structure.
I'm dissecting this very beautiful example of how CSS can help you create nice glow effects on images.
http://jsfiddle.net/necolas/KbNq7/
This particular line from the example mentions:
Although this method will only produce the full effect in Firefox 4,
other browsers will eventually catch up and apply transitions to
pseudo-elements.
What is a pseudo-element?
Pseudo-elements are CSS selectors that manipulate parts of an element in a special way.
They include:
:first-line
:before
:after
Application
Pseudo elements are applied like so
p:first-letter{
color:black;
font-style:italic;
}
Note: the : followed by the selector is how pseudo elements are denoted in CSS1 and CSS2. In CSS3, the double colon is used (::) to distinguish them from pseudo-classes.
More details here: http://reference.sitepoint.com/css/pseudoelements
Support
Support is decent for a number of browsers, with older versions of IE notably poor with support. QuirksMode has a compatibility table (a bit out-of-date but still useful): http://www.quirksmode.org/css/contents.html#t15
Cool Tricks
Pseudo elements can do some cool things, including
show the URLs of links in printed docs
fake a float:center;
See more here: http://css-tricks.com/9516-pseudo-element-roundup/
With jQuery
jQuery has a number of unique selectors that enhance and expand on the native CSS group:
http://api.jquery.com/category/selectors/
Note: you can use jQuery to force older browsers to adopt certain rules. For example, IE6 will ignore :last-child. Using jQuery can force IE6 to apply that style.
The Spec
http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors
Its not an element in the dom. Its something you can select with a selector, notably after a :.
http://www.htmldog.com/guides/cssadvanced/pseudoelements/