You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
So I've been making a lot of components as of lately and I've run into the issue of a lot of duplicate code that seems like it would be solved with better options for web component inheritance.
There might be an existing way to do this but I couldn't find any solutions online.
My main problem is that there isn't a way of passing down properties from an element that you are inheriting from such that they're easily accessible as attributes in your new element (so that they can be passed in when you're using the new component).
As an example if I had an element called my-card with a boolean property called expandable and I created another card called my-red-card that extended my-card I shouldn't have to redefine the boolean expandable in my list of properties within my-red-card and pass it into my-card in order to make it accessible when using my-red-card. There should be some way to automatically inherit the properties and apply them to the element you're inheriting from when used within that component.
Currently you have to re-list parent properties within your new element and pass them into the component you're inheriting from wherever you use it within that component. This can make things difficult to maintain as you're required to pass that property down in that manor along your entire inheritance hierarchy if you want to be able to access/modify those attributes easily when using the final node in this inheritance chain.
I don't think it should be the default behavior to automatically inherit all the properties and apply them to the component, however it would be nice to be able to call some sort of super function within your child element's property function in order to achieve this.
Again I could be missing something so if there is a better/existing way to approach this problem please let me know.
The text was updated successfully, but these errors were encountered:
MichaelScript
changed the title
Component inheritance
Easier way to inherit properties from custom elements
Sep 16, 2017
After creating native web components to serve as an example, inheritance worked as expected and it was unnecessary to redeclare inherited properties, this seems to be an issue with Polymer properties rather than the actual web component properties.
So I've been making a lot of components as of lately and I've run into the issue of a lot of duplicate code that seems like it would be solved with better options for web component inheritance.
There might be an existing way to do this but I couldn't find any solutions online.
My main problem is that there isn't a way of passing down properties from an element that you are inheriting from such that they're easily accessible as attributes in your new element (so that they can be passed in when you're using the new component).
As an example if I had an element called
my-card
with a boolean property called expandable and I created another card calledmy-red-card
that extendedmy-card
I shouldn't have to redefine the boolean expandable in my list of properties withinmy-red-card
and pass it intomy-card
in order to make it accessible when usingmy-red-card
. There should be some way to automatically inherit the properties and apply them to the element you're inheriting from when used within that component.Currently you have to re-list parent properties within your new element and pass them into the component you're inheriting from wherever you use it within that component. This can make things difficult to maintain as you're required to pass that property down in that manor along your entire inheritance hierarchy if you want to be able to access/modify those attributes easily when using the final node in this inheritance chain.
I don't think it should be the default behavior to automatically inherit all the properties and apply them to the component, however it would be nice to be able to call some sort of super function within your child element's property function in order to achieve this.
Again I could be missing something so if there is a better/existing way to approach this problem please let me know.
The text was updated successfully, but these errors were encountered: