Embed Size (px)
Citation preview
var XElementPrototype = Object.create(HTMLElement.prototype); var XElement = document.registerElement('x-element', { prototype: XElementPrototype }); new XElement();
var XElementPrototype = Object.create(HTMLElement.prototype); XElementPrototype.createdCallback = function () { console.log('created'); }; XElementPrototype.attachedCallback = function () { console.log('attached'); }; XElementPrototype.detachedCallback = function () { console.log('detached'); }; XElementPrototype.attributeChangedCallback = function () { console.log('attribute changed'); }; var XElement = document.registerElement('x-element', { prototype: XElementPrototype }); new XElement();
<template id='tmpl'> <style> input, button { border: 1px solid #000; border-radius: 3px; } </style> <input type='text'> <button>Button</button> </template>
var template = document.querySelector('#tmpl'); var div = document.querySelector('div');
var clone = document.importNode(template.content, true); var shadowRoot = div.createShadowRoot();
shadowRoot.appendChild(clone);
<html> <head> <title>x-element</title> <link rel='import' href='x-element.html'> </head> <body> <x-element></x-element> </body> </html>
var options = { zoom: 10, center: new google.map.LatLng(-34.397, 150.644) }; var mapCanvas = document.getElementById('map-canvas'); var map = new google.maps.Map(mapCanvas, options);
var marker = new google.maps.Marker({ position: new google.map.LatLng(-34.397, 150.644), map: map, title: 'Hello World!' });
var flightPlanCoordinates = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2
<google-map latitude=“37.77493" longitude=“-122.41942"> </google-map>
<x-notification autoshow title='Notification Title' delay='1000' timeout='3000' tag=‘tag’>Body Text</x-notification>
<template> <p>lorem ipsum</p> </template> <script> var XElement = document.registerElement('x-element', { prototype: { createdCallback: function () { var template = document.querySelector('template'); var clone = document.importNode(template.content, true); var shadowRoot = element.createShadowRoot(); shadowRoot.appendChild(clone); } } }); </script>
<polymer-element name='x-element'> <template> <p>lorem ipsum</p> </template> </polymer-element>
ཀ
