1
I was looking at some websites and noticed a site that set up this example here: http://html5-demos.appspot.com/hangouts. At first I didn’t call but then when I saw the html of this page I saw that it has a tag
<hangout-module></hangout-module>
that works as a canvas only for html. I wondered if anyone knows about it or how to create them...
3
That doesn’t sound "native" to HTML5, but rather an external library called Polymer (Edit: as pointed out by the OP in the comments, if trada polyfill). Note the first lines of the source code of the cited page:
<script src="/static/webcomponents-bdconf/js/polymer-all/polymer.min.js"></script>
<link rel="import" href="/static/webcomponents-bdconf/demos/components/hangouts/elements/hangouts.html">
That is, first he puts the library script above, then he imports a file hangouts.html which contains, among other things:
<polymer-element name="hangout-module" attributes="from messages profile" on-close="close" on-minimize="minimize">
Thus, the above file defines new tags, and the above library does some "magic" to allow their inclusion in normal HTML (i.e. to get such tags from the HTML document and turn it into something useful). If you look at the definition code, you will see that it uses other definitions made in the file itself, which in turn only use ordinary HTML elements. That is: after all, everything will become simple HTML.
The Polymer project is defined as "a set of polyfills for emerging features on web platforms" ("A set of polyfills for Emerging web Platform Features"). In this particular case, he’s acting like polyfill for functionality Shadow DOM / Custom Elements, at the moment only supported by Chrome and Opera according to the caniuse.com (however not consistently - see reply and commenting by @Gabriel Gartz).
The specification for this functionality is still in a "draft" state - it can change a lot before it is published - so it is difficult to find practical examples of it. Then I suggest reading what the specification says and/or documentation of the same in the Polymer project itself (also contribution of the PO in the comments).
Note: Do not confuse the above functionality with the element canvas - another HTML5 element, with the aim of creating a 2D "drawing area" or even 3D.
No, I didn’t, I spoke canvas because of the way I saw it, a normal tag that looked like html inside a canvas. Thank you I will take a closer look at the/
@Iagobruno blz, I wasn’t referring to you in particular, I told anyone who read my answer. And yes, it is perfectly possible that one of these "templates" has generated a canvas...
I think I found what it is, if I’m not mistaken that’s Shadowdom. https://github.com/polymer/ShadowDOM
@Iagobruno I think you’re right, this is something that exists in [draft of] HTML5. I’ll update the answer
@mgibsonbr Shadowdom is natively supported by Opera, but is different from the W3C specification and not supported by Polymer Platform. Actually Polymer as a whole is not supported by Opera, it was abandoned by the team because of API differences, despite having the resources available.
@Gabrielgartz Thanks for the info, I was just quoting (and linking to) the caniuse.com - but I know almost nothing of this functionality, except that it is in a draft state, so it seems to me that there are natural disagreements. I read your answer, and in fact it explains [the functionality itself] better than mine.
@mgibsonbr I want to help, I liked your answer, wanted to complement. I am working with Polymer project some time, I have also made Fork of several of their sub-projects, and I am adding compatibility with Opera, it is not a simple task, in version 13 of Opera (which is in alpha) it will fully support the project as it will be based on Blink. Thank you for your comment, hug!
3
This is about a Custom Element, provided in the HTML5 API for Web Components.
Today most browsers still do not support natively, as many of the parts the Apis that make up the Web Components are still being written.
This component you found uses Polymer Project, developed by Google, which works on most modern browsers (except Opera 12), in addition to the polyfill features provided by platform.js that makes up Polymer, it contains other very interesting features that make it very similar to Angularjs and even easier to develop, features like Templatebinding and others, making use of [Object.observer][5], template element among various features from the next generations of HTML5 Apis.
You can also include in any website the Custom Elements, using Htmlimports, of course to work in your browser you will need polyfill for this, also available on Platform.
These elements can still have their features, css and other things isolated from your DOM, using the feature of Shadowdom, which basically generates a document within the element, in order to isolate its internal elements.
In HTML there is already a canvas element, that is focused on drawing/image processing with 2D and 3D context. But maybe your quote is related to some other type of interface that refers to canvas as a component. But in the case of HTML5 is as I explained earlier are custom elements.
To learn more about the subject, I recommend this lecture by Zeno Rocha which is beyond all inspiring.
And the character of curiosity Mozilla also made a project based on the source code of Polymer, but only with the basics of Custom Elements, called X-Tags, has compatibility with a larger number of browsers, but not support for Htmlimports, only custom Elements in a slightly modified form of the official API.
Browser other questions tagged javascript html html5
You are not signed in. Login or sign up in order to post.
If possible, think of a better title, as the question has nothing to do with the element
canvas(unfortunately, I have nothing to suggest in that sense).– mgibsonbr