Is it possible to inlude polymer elements using HTML attributes instead of HTML tags? For example:
<div some-polymer-behavior></div>
I think it is more convenient to use attributes than wrapping code into HTML tags if I want to decorate an existing element with some functionality.
What you are looking for is extending native HTML elements.
Your element is
Polymer({
is: 'my-div-extension',
extends: 'div'
});
And the usage is
<div is="my-div-extension"></div>
Unfortunately, this comes with a few drawbacks, which you should be aware of:
It's not standardized and likely to be obsolete before Web Components spec is finished.
It is not (yet) possible to extend other Polymer elements
You can use behaviors instead
It is not possible to extend multiple native elements in one go
A wrapper element would be a better fit
You cannot apply multiple extensions to one tag like <div behavior-one behavior-two>
Related
I want to get all elements in my XML (NativeScript with Vue) that have the same class. Is this possible?
As an extension, is it possible to add custom attributes to existing controls like the TextField (similar to data-* attributes in HTML), and if so, is there a selector that I could use to get all elements having the same data- attribute? (For example, the HTML/CSS equivalent would be something like input[data-customerid="12"])
If you are looking for something like document.querySelector(...), there is a paid plugin - nativescript-dom. FYI, you might find the free / unmaintained version on Github, which is not guaranteed to work with {N} v6.x or later.
If you are looking for Attribute CSS selectors, that's supported out of the box. And Yes, you can add custom attributes in XML.
I'm using custom HTML tags such as <custom-element> for semantic convenience and styling those using CSS. I'm also using the tag name as a selector for jQuery such as $('custom-element').
I've removed document.registerElement('custom-element') from my code, and everything works as expected in Chrome.
Is it mandatory to use document.registerElement('custom-element') even if I'm not using any Javascript with those custom elements (except for the jQuery selector)?
The only thing registerElement does is allow you to create objects of the new element programmatically via constructor as opposed to by using createElement. This enables you to also add a prototype to the element, or extend an existing element, which AFAIK you can't do with createElement. You don't need to register custom elements if you don't need one of these three things (a constructor, the extension of an existing element, a prototype).
I have a question about extending browser based on QtWebkit. I would like to add custom elements tag.
I googled and there was only one way mentioned - using JavaScript registerElement function.
Apart from it I could modify browser to support new tag but I would like to avoid this method.
Is there another approach that allows me on adding new html elements e.g. plugins ?
regards
Jack
I understand that using custom html tags is improper for a variety of reasons, but I wanted to run a specific situation by you that might warrant a custom html tag and hopefully get told otherwise or possibly a better way of achieving my goal.
Throughout my code I have what I term as templates that are made up of a div tag with a template and a hidden class attached to it. This is not visible on the screen, but basically these "template" tags contains html that I use in Javascript to create a variety of different items. I do this so that I can style my templates in html rather than have to worry about mixing CSS in with my Javascript.
<!-- TEMPLATE -->
<div class="template hidden">
<span>Random Container</span>
Random Button
</div>
In javascript I would do something like
var template = document.getElementById("template");
var clone = template.cloneNode(true);
clone.removeClass("template hidden");
I would rather be able to do something like this
<template class="hidden">
<span>Random Container</span>
Random Button
</template>
So that if I have multiple templates in a single div I can grab them all rather than having to give them unique class names. Of course my reasoning for needing an implementation goes a lot deeper than this, but its not necessary to waste your time with the details. Let's just say that it will help clean up my Javascript ALOT.
Because the custom template tag is hidden and really is nothing more than a container that is convenient to call within javascript with document.getElementsByTagName("template"); Is this ok to do? I would probably prefix the tag with a custom name in case template ever gets implemented into html.
Modern browsers generally “support” custom tags in the sense of parsing them and constructing DOM nodes, so that the elements can be styled and processed in scripting.
The main problem is IE prior to IE 9, but it can be handled using document.createElement('...') once for each custom tag name.
Another problem is that validators will report the tags as errors, and if there are loads of such errors, you might not notice some real errors in markup. In principle you can create your own DTD to deal with this (I have an HTML DTD generator under construction, but it is trickier than I expected...).
With these reservations, use custom tags if they essentially simplify your job as compared with using classes.
Why not use one of HTML5's data attributes? They are for storing private data or custom info.
For your case, you could add data-type="template" or data-name="template" and then search and remove based on that. One simple function just like you would write to remove your <template> tag, but without breaking rules.
So, using your example, <div data-type="template" class="hidden"></div>
This is a follow-up question for In jQuery is it a bad idea to use name=X for all selectors?
I am using Backbone and decided that I wanted a way to differentiate between HTML elements that were bound and those that were not.
So I would write (in HAML):
.container
.title(name='title')
.separator
As you can see it's clear that the dynamic element is title.
The reason for this was so I could mess around with the style and rename classes without worrying about breaking the app. It also means in the template I can tell what the dynamic elements are without needing to go back and forth with the Backbone View.
My question now is, without using the [name] selector, does anyone have a code convention to keep track of which HTML elements are referenced from JS.
I have considering:
Using a common prefix on class names (e.g. class=bind-title)
Using some sort of custom HTML element (
Thanks!
FYI: I'm using CoffeeScript, Backbone and haml_coffee templates.
Updated jsperf to test all suggestions:
http://jsperf.com/class-or-name-attr-lookup/3
I would consider using a class to indicate that it is dynamic.
I'm not sure if you are aware of this but you can have multiple classes on one element. Like so:
.container
.dynamic.title(name='title')
.separator
This works in traditional HAML but I have not tried it with haml-coffee. If it doesn't work, you might have to specify the class like .title{:class => "dynamic"}(name='title').
I prefer this over a prefix on the class name because it's more semantically meaningful, which is how HTML should be used.
I am using data-view attribute on elements being set when rendering my Views.
This helps me to then show a tooltip in a browser window when I hover over View(s).