I have seen it a lot here and there, yet I could find any description or documentation about it!
Example:
<paper-input-decorator label="Your Name">
<input is="core-input">
</paper-input-decorator>
In 2020:
The is attribute is now part of HTML spec in the Custom Elements specification.
It follows the polymer spec and is documented for developers at mdn.
Only Edge still hasn't updated to include this spec but it its new chromium-based implementation, in 2020, its availability may become widespread.
In 2017:
There is no is attribute in HTML.
It is a proposed extension that appears in the Custom Elements specification (which evolved from the Polymer spec mentioned below).
It allows you to say that an existing, standard element is really a custom element.
<button is="fancy-button" disabled>Fancy button!</button>
… which allows for backwards compatibility. If custom elements are not supported by the browser (the spec is still a draft and has very limited browser support) then it will fall back to the default behaviour.
In 2014:
It is not HTML. It is an expando-attribute for Polymer custom elements.
If you used extends to create a Polymer element that derives from an existing DOM element (something other than HTMLElement), use the is syntax
It is part of the W3C Draft spec for Web Components' Custom Elements.
Latest Working Draft: http://www.w3.org/TR/custom-elements/#type-extension-semantics
Latest Editor's Draft: http://w3c.github.io/webcomponents/spec/custom/#type-extension-example
The is keyword is part of the W3C Draft spec for creating custom HTML elements with custom behavior.
In specific, is is used when extending a built-in element like <input>, <button> or <table>. For example, you could have a plastic-button element that extends <button> to provide some fancy animation when clicked.
You'd add the button to the page like this:
<button is="plastic-button">Click Me!</button>
Before you do this, you need to register plastic-button as a custom HTML element like this:
customElements.define("plastic-button", PlasticButton, { extends: "button" });
This references a PlasticButton Javascript class, which would look something like this:
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// Draw some fancy animation effects!
});
}
}
It'd be great if you could say <plastic-button>Click Me!</plastic-button> instead of <button is="plastic-button">Click Me!</button>, but that would create an HTMLElement with no special behavior.
If you are NOT extending a built-in HTML element like <button> and instead creating a new element that extends the generic HTMLElement, you can use the <plastic-button> syntax. But you won't get any of <button>'s behavior.
This is part of the W3C Draft spec for Web Components' Custom Elements:
http://www.w3.org/TR/custom-elements/#type-extension-semantics
You use the is attribute to markup a customized built-in element, a custom element that extends a built-in element.
There are two types of custom elements:
Autonomous custom elements are standalone — they don’t inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <popup-info>, or document.createElement("popup-info").
Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property). For example <p is="word-count">, or document.createElement("p", { is: "word-count" }).
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
It's part of web components spec for Custom Elements. So it's HTML.
Frameworks like Vue.js also supports is atribute in compliance with web components standard.
Related
I am new to polymer and keep seeing the "is" property, but never get a thorough explanation of it. Example :
<script>
Polymer({is: "some-property"})
</script>
or
<template is="dom-repeat"></template>
It seems to be a declaration of inheritance or the like and i sorta get it but would like to find a clear explanation.
Per the documentation:
To register a custom element, use the Polymer function, and pass in
the prototype for the new element. The prototype must have an is
property that specifies the HTML tag name for your custom element.
In this case, the
<template is="dom-repeat"></template>
is a specific custom element built-in to Polymer.js, which extends the native HTML template element.
The template page http://www.blacktie.co/demo/kelvin contains a tag I haven't seen before: <t>Email</t>
The corresponding CSS styles this: #footwrap t {font-weight: 700;}
I'm curious as to the significance of the <t>. It's not listed at http://htmldog.com/reference/htmltags or other lists I can find.
Is this a custom HTML tag? From what I've read about custom elements (eg http://www.html5rocks.com/en/tutorials/webcomponents/customelements) you need to call document.registerElement() or document.createElement() but this doesn't seem to be the case here.
Is this code semantically correct, or should it be written as:
<span class="t">Email</span>
#footwrap .t {font-weight: 700;}
Yes, the <t> tag is a custom element. While custom tags can be useful, if you want them supported in all browsers, you have to register the element with JS:
var tTag = document.registerElement('t');
More about custom tags here
So to answer your question, the coding is not valid, unless they have registered the element with the browser with JavaScript.
Sometimes, its just easier to use a class :D
This may be completely wrong, but t is not a real HTML tag. Therefor I assume it is a XHTML item. So yes if it IS XHTML then that would be correct, and the class would not be (unless that was the name of it of course).
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 want to add class for my option element. Is that valid to add class attribute in HTML option element?
Yes it is valid.
From the W3Schools website:
The <option> tag also supports the Global Attributes in HTML.
From which the class attribute is a part of. Please note that often, the option tag has formatting issues regarding the browser you are using, so styling it can be a little tricky.
EDIT: Since I wrote this answer, it has come to my attention that W3Schools probably isn't the most reliable source of good information. The previous answer isn't at all wrong, but it came from a source that has proven to be somewhat inconsistent/incomplete. As such, I think I should also append a more official link to this subject here.
The class attribute is valid for option according to the relevant part of the HTML 4.01 Recommendation. The HTML5 drafts, including HTML5 CR, are even more permissive: they allow class literally on any element.
My guess is that what you really wanted to ask was whether you can style some option elements differently from others, using class attributes and CSS. Then the answer is that this depends on browser – not due to problems with recognizing class attributes but due to implementations of that are partly immune to CSS as regards to styling items in a dropdown list.
Yes!
In HTML it is valid to add a class attribute to an option element [1].
However...
For CSS implications though, the usability is limited. Especially when it comes to the option tag because it is subject to the operating system's form control handlers [2]. This is the reason why code sample below will not actually work across all browsers.
HTML
<select>
<option>Centaur</option>
<option class="colored">Unicorn</option>
</select>
CSS
.colored {
background-image: url('my-colorful-background.png'); // e.g.: Apple doesn't recognize this rule
}
For JavaScript implications (w/jQuery), the usability is fully supported when it comes to the DOM objects but still bounded with the CSS implications as stated above. Thus, DOM-manipulation code like so... will work.
HTML
<select>
<option>Centaur</option>
<option class="colored">Unicorn</option>
</select>
JavaScript with jQuery
var label = jQuery('.colored').html();
console.log( label ); // outputs Unicorn
References
W3C - HTML 4.01 Specification, Forms, The SELECT, OPTGROUP, and OPTION elements
MDN - Styling HTML forms, Why is it so hard to style form widgets with CSS?
Yes class belongs to global attributes. Any element can have it.
Source: http://www.w3.org/wiki/HTML/Attributes/_Global
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