I'm trying to figure out the minimum set of parts of the web components polyfill at https://github.com/webcomponents/webcomponentsjs I need to take advantage of the CSS encapsulation offered by the ShadowDOM polyfill. Do I need the full polyfill?
If you just want to polyfill Shadow DOM, you can use ShadyDOM.
To polyfill Shadow DOM CSS, you should use also ShadyCSS.
You can use Vanilla JS to work with Shadow DOM
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Related
As far as I can see even with mode=open CSS classes of host are not piercing through Shadow Dom.
Is it possible to make CSS classes defined outside ShadowDom available to its contents?
No, the whole point of shadowDOM is encapsulation.
If you don't want that, then do not use shadowDOM.
Web Components can be programmed to accept some Global styling with:
CSS Custom Properties
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
::part
https://developer.mozilla.org/en-US/docs/Web/CSS/::part
I'm new to Material UI. When should I use props (in the .jsx script itself) and CSS (separate CSS stylesheet) to style MUI elements? Do I still need to use the CSS stylesheets for MUI elements at all, e.g. use CSS or sx={{}} prop? Or should it be left for non-MUI elements only?
While I understand MUI provides us with the template to make style changes using props, I also understand that we should typically follow a separation of concerns, hence the question.
Thanks a lot!
So you can check this out in their docs below.
https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component
I personally wouldn't use CSS with MUI. You can use either CSS or the sx prop to override styles, however it feels like sx is the preferred method. Using CSS requires targeting the specific classname and nesting your classes which I find is quite a lot of work for what is meant to be one-off customizations.
If you wanted to change specific MUI components, I still wouldn't use CSS as you can just create your own themes with the ThemeProvider.
The idea behind MUI is a CSS-in-JS solution so you're sort of doing away with the concept of the traditional "separation of concerns". If you prefer to set up your projects that way, things like Tailwind or SASS/SCSS are more suited to that.
So in summary, yeah I'd only use CSS with the non-MUI components, sx prop for quick style overrides, and the ThemeProvider for global style changes.
In my index.html, I'm importing my Polymer custom element and linking the bootstrap stylesheet. If I inspect my custom element and its local DOM, I see that the bootstrap style is bleeding onto it. Is it because the shadow DOM polyfill of Polymer (shady DOM) does not support encapsulation?
I have tried setting the Polymer global DOM setting to "shadow", but that didn't help (maybe because I'm using Safari and THAT it does not support shadow DOM yet, but I have linked the full WebComponents library, so it's supposed to polyfill that).
Searching on SO, I found this question: External CSS affecting ("bleeding" into) shadow DOM with Polymer, but it is related to version 0.5 of Polymer, so I don't know how relevant it is for me right now.
Known limitations
CSS encapsulation is limited.
This is a known limitation of the Shadow DOM polyfill.
Shadow DOM is not enabled by default in Polymer 1.0. This is because not all browsers currently support shadow DOM and it is incredibly hard to polyill so they didn't want people to experience different appearances in different browsers. You can turn this on however. See here for how to do this. More information on this here and here
Imagine the Shady DOM implementation something like jQuery plugin.
when a plugin adds new elements to you DOM the are no encapsulated in any way.
you can force Polymer to work with shadow DOM but pay attention that it is not fully supported and the polyfill webcomponents.js is doing a heavy lifting to make it work, so the performance is no optimal.
From the documentations:
When a component is instantiated, Angular
creates a shadow DOM for the component.
loads the selected template into the shadow DOM.
creates a child Injector which is configured with the appInjector for the Component.
But, as far as I know, shadow DOM is not supported yet in IE, Safari, and even in default configuration of Firefox!
Considering the fact that shadow DOM is not a feature that can be easily added to browser via a js library or something, how will be browser support for angular2?
PS: forgive me for calling IE and Safari (specifically IE) popular browsers!
Angular 2 has two modes for Shadow DOM: emulated & native. In other words, browsers without Shadow DOM support will get an effective but slower polyfill.
Discussion & Source code
Both Angular 2 and Polymer use Polyfills to emulate the Shadow DOM. Polymer calls it Shady DOM.
Note that these polyfills are supported only in the latest versions of the Browsers, like IE 11.
I was thinking of using these styles for easier cell rollover effects in a datagrid, but I can't seem to get these styles working on anything other than the most basic of tag.
Is the <a> anchor tag the only element in HTML to support styles like hover, active, visited?
It should work on all elements, but IE6 only supports in on links. I used whatever:hover to work around that.
Modern browsers support the pseudo style properties for all elements, IE6 is the only current wide-spread browser that doesn't (and that's only for the :hover property).
It is unfortunate but until IE6 usage drops below minimal levels, you should avoid using the :hover property on non-anchor elements for better cross-browser support. Alternatively, you can provide IE6 support for it using javascript (with browser detection) or CSS expressions.
According to the CSS2 specification:
CSS doesn't define which elements may be in the above states [:hover, :active, and :focus], or how the states are entered and left.
In other words, don't depend on them working at all. I would use Javascript, along with CSS, to get a wider audience.
PPK has a great reference for browser compatibility here: http://www.quirksmode.org/css/contents.html#t16
It shows the browsers that correctly support the :hover pseudoclass (and lots of other css selectors).
Yes unfortunately anchor is the only tag that supports these styles.
I would recommend the following:
Before coding any of your own JS, try use the JQuery framework, it might save you loads of work.
Another crazy workaround would be to expand the size of the using style to 100% of the parent (cell), this way you would effectively be applying the style to the cell.