Working with Polymer Project markup, the <element> and <polymer-element> tags take an attribute called attributes to publish things in the custom element (1).
This causes problems in jade, since since #617 attributes as an attribute name is treated specially. Is there a workaround for this in Jade?
After the recent update to jade (v1.0.0 and greater) attributes is no longer special cased. As such you can just write:
polymer-element(attributes='foo bar')
results in:
<polymer-element attributes="foo bar"></polymer-element>
If you want to try it out in your browser you can do so at: http://jade-lang.com/demo/
Just put a '\' before the attributes-attribute, like so
polymer-element(\attributes='foo bar')
It was just a guess, but it worked. Can't find any reference in the documentation on this.
So consider it as a work around.
I don't know if this helps in your particular situation, but note that you can use an object property called publish in your prototype in place of the attributes attribute on the <polymer-element>.
E.g.
<polymer-element attributes='foo bar'...>...
is equivalent to
<polymer-element...>...
<script>
Polymer(..., {
publish: {
foo: null,
bar: null
}
}
That way you should be able, at least, to write your own elements without bumping into Jade syntax.
Just to keep this answer up-to-date, attributes is no more reserved in jade :).
Related
I know that the textarea doesn't support the functionality of pattern, however if I set the pattern variable in html, its still present in the browser.
So I have to execute the pattern verification in js anyways, but is it OK for me to store the pattern in the pattern attribute? As opposed to data-pattern or something, for consistency with the input elements?
You should use data-* attributes for extra attributes and since textarea tag does not support the pattern attribute then adding it like adding value to div.
Hope this helps.
Custom attribute is suppose to have the data- prefix, so I recommend to use that or you could ran into issues when validating your code.
And what happens if such an attribute suddenly become a standard attribute?
More to read:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
What does the "is" attribute in Polymer stand for? I Googled about it but to no avail. From what I understand it is the identifier of the component, however I am not sure how it is related to "is". Is it an abbreviation of some sort?
The is attribute is not Polymer-specific but part of the web components spec, specifically the Custom Element part of the spec. It's how you extend native elements.
Source: http://w3c.github.io/webcomponents/spec/custom/#instantiating-custom-elements
The is-Attribute is used to extend native HTML elements:
MyInput = Polymer({
is: 'my-input',
extends: 'input',
...
});
and later on
<input is="my-input">
You can find the documentation here.
When working with custom HTML elements in web components, should I still name custom attributes with the prefix data?
For example:
<!-- Should form be data-form? -->
<my-button form="foo">click me</my-button>
No, that's not necessary.
Existing HTML elements have a defined set of attributes, which means you would invalidate the HTML by just adding any attribute. By introducing the data- attributes, it was made possible to extend existing elements without invalidating them.
Web components are custom elements. They have no defined set of attributes, you define them yourself. Whether or not you use data- attributes is completely up to you, but you don't have to. Your component cannot become invalid because there is no definition of valid for it.
If you care about semantic/valid HTML, this answer may be relevant to you too: Are custom elements valid HTML5?. In short: use a dash in your component name to make sure it's picked up as valid HTML.
In general, there is no difference between custom elements and predefined. You might create an element of your choice with document.createElement and register it with document.registerElement. The result would be:
console.log(document.createElement('my-button').constructor);
//⇒ function HTMLElement() { [native code] }
console.log(document.registerElement('my-button'));
//⇒ function my-button() { [native code] }
console.log(document.createElement('my-button').constructor);
//⇒ function my-button() { [native code] }
As you could see, once registered, the element is awarded with it’s own constructor. That provides an ability for components to behave in it’s own way. But:
console.log(document.createElement('my-button').__proto__.__proto__);
//⇒ HTMLElement
is still a good old plain HTMLElement. So, the rules for attribute naming were not changed.
Please note, that libraries, like polymer, might add additional attribute handling; the above is true for plain web-components only.
I have a list of items in an html table. On each row (tr) I'm proceeding like this:
<tr idAffaire="#suite.IdAffaire" idSuite="#suite.IdSuite" class="#suite.Username row droppable">
I used the attributes idAffaire and idSuite for retrieving some infos later. I know the official identification attribute is "id" but in my case I need 2 id. When I compile my code, VS is warning me about some things:
this name contains uppercase characters, which is not allowed.
attribute 'idaffaire' is not a valid attribute of element 'tr'
...
Is it possible to prevent these warnings? Is there a better way of doing?
Thank you.
Yes, in Tools > Options > Text Editor > HTML > Validation > [Untick] Show errors
Ideally, you could use 2 hidden input fields with the id="suite" and value="whatever" to allow you to pick these up in a valid way.
The problem is that you are writing invalid HTML. As you mentioned, id is a valid attribute but idAffaire or idSuite are not. I'm assuming from the fact that you get a warning about uppercase characters, you are using an XHTML doctype. A better way to do this would be to use an HTML5 doctype:
<!DOCTYPE html>
And use custom data attributes for your new attributes:
<tr data-affaire="#suite.IdAffaire" data-suite="#suite.IdSuite" class="#suite.Username row droppable">
I believe you should add name space extension of yours. Then define your newly introduced attributes.
What you are doing is termed as adding custom attributes to html elements, which have a very varying opinion among the experts.
Firstly , using capital in html attributes is not recommended, you can switch to small case.
Secondly , adding custom attributes in XHTML (which i suppose you are using) throws warning, where as this is perfectly valid in HTML5.
there are few option to deal with it -
use Jquery .data() api to store data with java script.
or
follow a specific convention while storing data making it easy to maintain and read.You can follow HTML5 syntax
<ul>
<li data-id='5' data-name='john'></li>
</ul>
Like a tag that I can use to store some necessary info? But really isn’t required or used by the HTML? Works like the tag attribute for objects on Visual Basic?
Up until HTML5 no. With HTML 5 there is provision for this with the data-* attribute.
For example:-
<div id="myStuff" data-mydata="here is my data">
In current technology there is no "official" away to do this. However all browsers allow you to add any arbitary attribute to a HTML element so in HTML4 you can do this:-
<div id="myStuff" data-mydata="here is my data">
Which as you can see is identical but not offically sactioned and if you want strict XHMTL compliance will be considered "broken".
You can access the attribute just as you would any other:-
var mydata = document.getElementById("myStuff").getAttribute("data-mydata");
You could perhaps use the html5 data-* attributes? It'll fail validation on html4, but it is still probably the best option...
If you're storing data to use in javascript, you can also use something like jQuery's Metadata plugin. Basically, you can store data within the element's class="" attribute, like so:
<div id="aaa" class="class1 class2 class3 { type: 'food', color: 'green' }"></div>
Then in javascript:
alert($('#aaa').metadata().color) // "green"
Other kits use the title or rel attributes to store data. While this is more validation friendly, it may or may not be better than using AnthonyWJones' answer of just using non-standard attributes. It'll "break" validation, but then again according to Dojo, custom attributes are perfectly valid HTML, even if they don't validate against a DTD.
So no - there isn't a single well accepted specific attribute where you can dump all data. All existing attributes are for specific uses. But you can either 1) create your own attributes, or 2) coopt an existing tag to reuse for your purposes. Just wanted to point out the alternative.
Have a look at www.htmlref.com or W3C for the used attributes.
Other than those you can just add your own, they will render and they will be accessible via code for instance in C# you can access a controls attribute collection.
Control.Attributes["MyCustomAttribute"] = "Hello World";
there’s rel and rev attributes, which work in elements with an href-attribute. they have a semantic meaning, but are often abused as an attribute to store additional information