2

Are there guidelines on the best way to extend core elements like core-item in Polymer?

For example, I wanted to extend core-item with a paper-ripple ("Ripple All The Things!") and it seems like the options are to either extend core-item or compose a new element including it. Extending seems to lose styling of core-item, and Composing means I need to map all the attributes:

Extend core-item:

<polymer-element name="my-item" extends="core-item" noscript>
  <template>
    <paper-ripple fit></paper-ripple>
    <shadow></shadow>
  </template>
</polymer-element>

This has the unfortunate side effect that the CSS defined in core-item.css nolonger matches for all the 'html /deep/ core-item' rules and I lose the padding around the icon, etc, unless I manually go set it up again in my-item. I need to go into my-item and attempt to style it match the work done in core-item.css, either matching to 'my-item' or maybe just on the :host? This seems like a bunch of extra copy/paste :

<style>
:host {
  display: block;
  position: relative;
  height: 40px;
  white-space: nowrap;
}
:host(.core-selected) {
  font-weight: bold;
}
:host::shadow core-icon {
  margin: 0 16px 0 4px;
}
:host::shadow ::content > a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>

Or compose a new my-item:

<polymer-element name="my-item" attributes="label icon src" noscript>
  <template>
    <core-item src="{{src}}" icon="{{icon}}" label="{{label}}">
      <paper-ripple fit></paper-ripple>
    </core-item>
  </template>
</polymer-element>

This works great, though I then need to map all the attributes of core-item to my published attributes. Not that bad, but it feels like there may be a better way, particularly for more complicated components?

Ryan Watkins
  • 832
  • 5
  • 15
  • 2
    This doesn't answer your question, but there is a `paper-item` element that adds the ripple: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-item but it doesn't extend `core-item`. It builds a new element that adds ``. – ebidel Jul 16 '14 at 01:56
  • In my ideal world, components wouldn't need to use `html /deep/ tag-name` styles, but rather scoped styles inside their Shadow DOM (which would mean that extending them would preserve their styles). I'm not exactly sure why a lot of `core-*` elements use the `/deep/` styles. – CletusW Jul 16 '14 at 17:48
  • There should only be a few `core-*` elements that use `/deep/` styles; I know specifically of `core-icon` and `core-item`. The reason is that these particular elements are high-frequency (tend to be numerous), and don't otherwise need shadow-roots. In these special cases, creating shadow-roots to encapsulate the styles was not a good performance trade-off. – Scott Miles Jul 18 '14 at 23:43
  • I just looked at `core-item` and it does in fact use shadow-root. The performance value in this case is avoiding the ` – Scott Miles Jul 19 '14 at 01:13
  • Possible duplicate of [Can Web Components be used to create custom input elements?](http://stackoverflow.com/questions/18623765/can-web-components-be-used-to-create-custom-input-elements) – Paul Sweatte Jan 18 '17 at 03:20

0 Answers0