I was looking at websites and noticed a site that set up this example here: link . At first I did not call but later when I saw the html of that page vi that has a
<hangout-module></hangout-module>
It works as a 'canvas' only for html. I wanted to know if anyone knows about it or how to create it ...
This does not look anything like "native" to HTML5, but rather an external library called Polymer > Edit: as pointed out by the OP in the comments if it comes from a polyfill ). Notice the first few lines of the source code for the 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, it first puts the script from the library above, then it imports a hangouts.html file that contains, among other things:
<polymer-element name="hangout-module" attributes="from messages profile" on-close="close" on-minimize="minimize">
So the above file sets new tags, and the above library does some "magic" to allow them to be included in normal HTML (ie to get such tags from the HTML document and turn it into something of useful). If you look at the definition code, you will see that it uses other settings made in the file itself, which in turn uses only ordinary HTML elements. That is: in the end, everything will turn out to be simple HTML.
The Polymer project is defined as "a set of polyfills for emerging web platform features" ("A set of polyfills for emerging web platform features") . In this particular case, it is acting as polyfill for the Shadow DOM strong> / Custom Elements at the moment only supported by Chrome and Opera by caniuse.com (but not consistently - see response and #
The specification for this functionality is still in a "scratch" state - it can change a lot before being published - so it is difficult to find practical examples of it. I suggest you then read what the specification says and / or the documentation about the same in the Polymer project itself (also OP contribution in the comments) .
Note: do not confuse the above functionality with the element canvas - another element provided in HTML5, in order to create a "drawing area" in 2D or even 3D .
This is a Custom Element , provided in the HTML5 API for Web Components .
Today most browsers still do not support natively, not least because many of the parts that make up the Web Components are still being written.
This component you found uses the Polymer Project , developed by Google, which runs on most modern browsers (less Opera 12), in addition to the polyfill features provided by the platform.js that makes up the 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 of various features of the next generation of HTML5 APIs.
You can also include Custom Elements using HTMLImports , of course, in order to work in your browser you will need polyfill for this, > platform .
These elements can still have their resources, css, and other things isolated from their DOM, using ShadowDOM , which basically generates a document inside the element, in order to make its internal elements isolated.
There is already a canvas element , which is focused on drawing / image processing with 2D and 3D context. But perhaps its citation 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, I recommend this Zeno Rocha's lecture which is beyond all inspiring.
And as a curiosity Mozilla also made a project based on the source code of Polymer, but only with the basics of Custom Elements, called X -Tags , is compatible with a larger number of browsers, but does not support HTMLImports, only to custom elements in a slightly modified form of the official API.