I know there is this question on multiple inheritance/composition. However, it seems like this question is more about how to reuse functionality from multiple existing elements in other elements. And obviously, the solution for that are mixins.
I would like to know, how I can actually "decorate" existing elements without really borrow functionality from them. We know there is this extends property one can use to extend an existing element with Polymer.
So making a normal <button> behave like a mega-button is as simple as attaching <button is="mega-button"> and write a component for it. But it turns out, that it's not possible to extend multiple elements. So something like extends="foo bar" doesn't work. What if I want to build a web component, that can actually be applied to different elements?
For example, I don't want to only extend <button> elements with mega-button but probably also an <a> element so that it looks like and behaves like a mega-button too?
The mixin approach doesn't really help here (as far as I get it), because they do nothing more then providing shared logic for different web components. That means, you create multiple components, and reuse logic (packed in a mixin) from a mixin.
What I need is a way to create one web component that can be applied to multiple elements.
Any idea how to solve that?
UPDATE
Addy answered with some approaches to handle that use case. Here's a follow up question based on one approach
How to find out what element is going to be extended, while registering my own in Polymer
And another one on Is it possible to share mixins across web components (and imports) in Polymer?
UPDATE 2
I've written an article and concludes my experiences and learnings about inheritance and composition with polymer: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/
If you need to have just a single import that has support for being applied to multiple elements, your element could include multiple element definitions which may or may not take advantage of Polymer.mixin in order to share functionality between your decorating elements.
So pascal-decorator.html could contain Polymer element definitions for <pascal-span> and <pascal-button>, both of which mixin logic from some object defined within pascal-decorator.html. You can then do <button is="pascal-button"> and <button is="pascal-span"> whilst the logic for doing so remains inside the same import.
The alternative (if you strictly want to do this all in one custom element, which imo, makes this less clean) is to do something like checking against the type of element being extended, which could either be done in the manner you linked to or by checking as part of your element registration process.
In general, I personally prefer to figure out what logic I may need to share between elements that could be decorated, isolate that functionality into an element and then just import them into dedicated elements that have knowledge about the tag (e.g <addy-button>, <addy-video> etc).
Related
I'm currently working on an Angular app, specifically a quite complex table, in terms of styling and features.
My component file currently has 2k lines of code, and it comprehends functions for styling text, styling the table, functions for check if data treated are correct, data formatting and so on...
Many of theese funtions are called directly from the HTML fiel thorugh interpolation.
Is there any way to break up this quite large file into smaller ones?
You can break up your component into smaller ones and nest them.
Typical example:
<app-list>
<app-list-item></app-list-item>
</app-list>
The parent component can then pass its properties down to the child components:
<app-list>
<app-list-item [name]="valueFromParent"></app-list-item>
</app-list>
It is further possible to emit values back up from the child to the parent:
<app-list>
<app-list-item (onChildEvent)="updateParent($event)"></app-list-item>
</app-list>
I tried to keep it simple here, but there is more to it.
I suggest going through the official Angular tutorials, because they explain these concepts pretty well.
You should further try to put as much functionality into Services as possible. This also helps to make your components smaller, easier to reason about and helps testing.
E.g. a functions for check if data treated are correct would be a good example for a service method.
I want to validate a custom polymer element. To do this, I want in javascript to access all my nested polymer elements to see if they are valids.
I can't find an easy way to do this.
this.querySelectorAll does not find my inputs that are nested in other polymer elements. It seems I can't use "/deep/" in these selectors.
Is there an easy way to do this ? Or do I have to do a recursive javascript methods that will call a querySelectorAll in all elements with shadow roots ?? (I guess performances will get ugly...)
Thanks for your help.
If there is no fast solution, I will probably try the other way around (have my inputs register to the parent)
Answer:
element.querySelectorAll() will find some elements when using /deep/, however, it only goes so far (1 shadow dom level). This would indeed necessitate recursive calls from each ElementNode.
Note:
This type of behavior largely goes against the core tenets of HTML (i.e. that the web page works no matter how well-formed the content is). In other words, all elements are valid no matter their placement.
As an example, I have made a custom element that only renders specific child elements and hides all others. This still keeps in line with the above tenet, as an element's base rendering is controlled by the element/agent, but allows for the developer/designer to customize its presentation aside from the standard presentation.
Given current HTML5 specs that allows creating custom HTML elements (as long as their name contains a dash), and the fact that Web Components seem to be a feature that's here to stay, I'd like to know why is creating your own custom HTML elements frowned upon?
Note, that I'm not asking whether to use Web Components - which are still a moving target, and even with great polyfills like Polymer might not be ready for production yet. I'm asking about creating your own custom HTML tags and styling them, without attaching any JS APIs to them.
Short answer: I haven't heard any very compelling reasons to avoid them.
However, here are some recurring arguments I've heard made:
Doesn't work in old IE (just document.createElement("my-tag"); should fix that).
Global namespace clashes (same applies to class names, and custom elements in general).
CSS selector performance (doh, this is just about the last thing you should worry about).
Separation of functionality, meaning and presentation. This is actually the only argument I've heard that IMHO has any valid basis to it. You're of course better off with semantic HTML (search engines and all that), but if you were going to use a div for it otherwise, I don't see why you couldn't use a custom tag instead.
One of the arguments against custom tags is their implied incompatibility with screen readers. This issue can be resolved with WAI-ARIA attributes.
There exists an issue in IE11, which breaks table layout if a custom element without display property is inserted inside a table cell. Check the plunker code. Therefore, it's the safest to declare all new elements explicitly, for example like so:
new-element {
display: block;
}
I recently asked How to extend multiple elements with Polymer and it turned out, in fact, you can't really. The idea was to create a web component that can be applied to different elements to "decorate" them.
Addy Osmani answered this question with a few approaches to handle that use case.
One of them was:
The alternative (if you strictly want to do this all in one custom
element, which imo, makes this less clean) is to do something like
checking against the type of element being extended, which could
either be done in the manner you linked to or by checking as part of
your element registration process.
Despite from fact that this approach might be less clean, my question is:
How I can find out what element is going to be extended while I'm registering my own?
I am developing a library of HTML components. The underlying technology is not relevant; the code for each component just generates HTML that is ultimately sent to the browser.
The problem I'm having is that a lot of the generated HTML needs to be styled by the application. And I don't know ahead of time exactly what that styling might be. Also, the generated HTML tends to have several divs and spans for, each of which might be styled differently. Think of something like a calendar component and all the different ways that might be styled.
At first I thought I'd just assign a class to every non-trivial element. I prefixed all my class names with "foo" (the name of my library), so the div for the calendar component has class foo-calendar. But inside the components I started to wonder about this approach because I kept having to make up weird names for all the various divs that make up each one. And what about when there's only one tag of a certain type in the component? Do I still give it a class even though it doesn't add any additional meaning?
The I started thinking that I'll only add enough classes to uniquely identify each tag. So if there's only one input field in the component, I won't give it a class at all, because the CSS selector ".foo-calendar input" will find it. But this approach seems a little too subjective.
Another question I have is, do I prefix all my class names with the name of my library, or only the "top-level" classes? Or do I nest the class names? In other words if the calendar has class foo-calendar, then does the month display have the class "month" or "foo-month" or "foo-calendar-month?"
What strategies do you follow for assigning CSS classes to library HTML?
I'd say more classes is better (to make css selection easier), and namespace them all (to avoid collision), but I'm imagining a WordPress plugin or something modular that I might want to plug into my existing website.
I really like the way Gravity Forms structured their html classes, because it makes it easy for me to tweak and customize without having to touch the markup, so if that's what you're looking for, maybe take a look at their CSS Guide: http://www.gravityhelp.com/gravity-forms-css-visual-guide/
I suggest looking into OOCSS (Object Oriented CSS).
Code - https://github.com/stubbornella/oocss
Introduction - http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/
I personally like this method because it feels easier to style elements on the page.
The basic idea to evaluate the styles you have on your page then create some general purpose classes that can be applied throughout your site. Sometimes I get very granular and I create a class like .bold {font-weight:bold} but most of the time this should not be done. Also another key idea is to separate CSS structure (your grids, positioning, etc.) and your styles (colors, font-weight, backgrounds, etc.). This is done to improve maintainability.
If you find a common theme in how your widgets are styled then break that out into a class and apply as needed. For example, all over the web there are elements that have an image to the left and text on the right. See your SO signature at the bottom of your question here. This could be made into a generic class that could be applied any instance of a widget with an image to the left and text on the right.
If you add a reset declaration you don't need to prefix all your classnames. You'll find a proper reset-css in several css frameworks.
I would use as less as possible classes for your elements (and would use no IDs), as you have described in the 4th paragraph.
Of course if you do this, your css selectors are becoming very long - but maybe you could use SASS/SCSS to prevent totally chaos ;-)