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.
Related
I've been reading about Angular 2's style encapsulation methods where you can write your styles directly into the component.
This method can use the native shadow dom or an emulated one. What are the performance benefits to using either for component specific styles?
It`s a pity, but there are performance problems with emulated styles encapsulation. The thing is, Angular uses attributes to apply CSS rules. And the use of them is not efficient, especially in the current version of Edge.
Here you can see some benchmarks as a proof.
https://medium.com/#andreygoncharov/edge-hates-you-attributes-d15faf162939
So in 2017 maybe you should avoid using Angular styles encapsulation when developing big projects.
Here you can check the status of the issue.
For emulated there are not performance benefits. It's just style encapsulation that automatically scopes styles to specific components.
emulated
With AoT the style rewriting is done at build time, otherwise it takes quite some time at runtime to analyze and rewrite the styles.
The styles are then added to the <head> element.
native shadow DOM
There are some performance benefits because the browser in some situations can know that some required re-render is local to a component, which could otherwise cause full page re-render. I don't know a concrete example though.
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
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.
Given a webpage with dynamically loaded web components (shadow DOM) and some external CSS files (Bootstrap, etc.). I want these CSS files to be applied within the components (shadow DOM). What are the possible solutions?
Using Polymer -- we're already using AngularJS and don't wanna start messing with another framework too. (Although it's possible.)
Refactoring the CSS files and include /deep/ everywhere -- maintainability...
Import each CSS file manually into the beginning <style> part of each shadow DOM -- no comment...
Is there any better way to apply whole CSS files within shadow DOMs?
Question is a bit old, but putting this answer here in case it helps.
/deep/ has been deprecated
Other option is to use custom properties provided by Polymer.
If you don't want to use Polymer then as suggested in the discussion on the /deep/ and ::shadow selectors deprecation thread, you can you use css #imports.
You can generate the url of your external stylesheet and inject it in your shadow dom templates at run-time.
I have written a descriptive answer here on the topic.
I've written a few Polymer components so far and for my more complicated stuff I love how their styling is isolated from the rest of the page. It's been much easier to use them across multiple apps.
However, today I'm creating a super simple component, and I'm realizing that I'd really like to have the page's styles bleed in. I've got a component that packages up a bunch of logic, but just renders a basic <a href> link. Is it possible through CSS or other means to have that link inherit its styling from the rest of the page?
appyAuthorStyles used to be great for this. Unfortunately, it's no longer in the Shadow DOM spec.
Your two solutions are:
Create a small stylesheet (e.g. shared.css) that includes the common rules the page and component use.
Use ::shadow and /deep/ to style the link from the outside, the same way as the page styles its links.