Styling Polymer Element in Angular2

styling polymer element in angular2

Having this in my index.html solved my problem:

<script src="https://polygit.org/polymer+:master/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script>
/* this script must run before Polymer is imported */
window.Polymer = {
  dom: 'shadow',
  lazyRegister: true
};
</script>
<link href="https://polygit.org/polymer+:master/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-button/paper-button.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-item/paper-item.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-listbox/paper-listbox.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-menu/paper-menu.html" rel="import">

<style is="custom-style">
    :root {
      --paper-dropdown-menu : {
        width: 280px;
      }
    }
</style>

Polymer elements within angular 2 component

There are a few open issue about Angular2 combined with Polymer. For example Angular doesn't use Polymer.dom(el)... for manipulating a Polymer elements children. This is probably what breaks your components.
A workaround is to enable full shadow DOM and polyfills. See https://www.polymer-project.org/1.0/docs/devguide/settings.html

An issue I haven't found a solution yet is passing <template>s (like required for example for <iron-list>. Angular handles templates on its own and doesn't pass it to the Polymer element.

~~There is a ngNonBindable directive. I haven't tried it yet on the <template ngNonBindable> myself but it might work.~~ I tried it seems that's only to ignore [prop]="field"/prop="{{field}} bindings.

Another issue is with <style is="custom-style">. They can only be added in the <head> element or within Polymer elements, but not to Angular components.

See also Two-way binding in Angular 2 with NgModel and mutating bound property?

Why does CSS Styles not apply on Angular 2 component with Vaadin elements?

Angular doesn't support CSS variables and mixins.
That's a Polymer feature and only works in Polymer elements.

As a workaround you could try to create a wrapper Polymer element where you put the styles and wrap the Vaadin element with that Polymer wrapper element.

Angular 2: How to style host element of the component?

There was a bug, but it was fixed in the meantime. :host { } works fine now.

Also supported are

:host(selector) { ... } for selector to match attributes, classes, ... on the host element
:host-context(selector) { ... } for selector to match elements, classes, ...on parent components
selector /deep/ selector (alias selector >>> selector doesn't work with SASS) for styles to match across element boundaries
- UPDATE: SASS is deprecating /deep/.
  
  Angular (TS and Dart) added ::ng-deep as a replacement that's also compatible with SASS.
- UPDATE2: ::slotted
  ::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
  
  https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

See also Load external css style into Angular 2 Component

/deep/ and >>> are not affected by the same selector combinators that in Chrome which are deprecated.

Angular emulates (rewrites) them, and therefore doesn't depend on browsers supporting them.

This is also why /deep/ and >>> don't work with ViewEncapsulation.Native which enables native shadow DOM and depends on browser support.

Overriding polymer element css

The current 1.0.0 release of <spinner-backdrop> has no CSS property/mixin to set the z-index, but the --spinner-backdrop-overlay mixin was recently added and not yet released. You'd be able to use the mixin to set the z-index like this:

<style is="custom-style">
  spinner-backdrop {
    --spinner-backdrop-overlay: {
      z-index: 0;
    };
  }
</style>

If <spinner-backdrop> is inside a Polymer element (<dom-module>), your <style> doesn't need is="custom-style". Otherwise, it's needed to apply the mixin properly.

demo (in <dom-module>)

demo (in index.html)

Styling Polymer Element in Angular2