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).
Related
so i'm using javascript and what i've done is capture a nodeList of shadowroot buttons within a webpage. I need to add attributes to each of them. Is there a way to do so? I've done it to other elements (not shadowroot) by using the .attr() but it appears shadow-roots act differently?
An example of a previously used code I had that is non shadow-root is the following:
elements.eq(i).attr("custom-attr", "analytics-purposes-only" +
elements.eq(i)..text().trim());
thank you in advanced.
also to note, this is my first time interacting with shadow-roots so things are new to me for this one.
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.
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>
I need to create an custom-element dynamically.
I tried
var newElement= document.createElement('custom-element');
this is work. but My problem is when I want to add attribute to this element, to bind an array to this element.
I tried
newElement.setAttribute('data','{{data}}')
But it says that it expected to array and received '{{data}}'
How can I add this binding to dynamically elements?
I dont think this is possible right now, please see from kevinpschaaf:
https://github.com/Polymer/polymer/issues/1778
No, we don't currently support this, outside of dom-bind, which is the
only template implementation that late-binds instance children. You
can document.createElement('template', 'dom-bind'), then you can
dynamically append children with binding annotations to its content,
and the bindings will only be evaluated once the dom-bind is attached
to the document. See tests here that show this usage of it:
https://github.com/Polymer/polymer/blob/master/test/unit/dom-bind.html#L95
Note that dom-bind does not currently allow binding to outer scope, so
it has limited use in custom element templates (it's main use case is
for binding between elements in the main document), and that's not
likely to change short-term.
We are achieving a lot of performance optimization by baking the
binding connections into the prototype at registration time for an
element (rather than at instance time), and we haven't built up enough
of the machinery to easily allow runtime addition/removal of bindings.
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