Web Components changes Web Development
7 likes1,162 views
The document shows code for creating a custom HTML element called x-element that uses Shadow DOM. It defines callback functions for the element's lifecycle that log messages. It also includes examples of using templates, importing elements, and registering the element with Polymer.
![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,](https://image.slidesharecdn.com/web-components-changes-web-development-140730040123-phpapp01/85/Web-Components-changes-Web-Development-36-320.jpg)
Web Components changes Web Development
- 20. var XElementPrototype = Object.create(HTMLElement.prototype); var XElement = document.registerElement('x-element', { prototype: XElementPrototype }); new XElement();
- 21. 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();
- 25. <template id='tmpl'> <style> input, button { border: 1px solid #000; border-radius: 3px; } </style> <input type='text'> <button>Button</button> </template>
- 29. var template = document.querySelector('#tmpl'); var div = document.querySelector('div'); var clone = document.importNode(template.content, true); var shadowRoot = div.createShadowRoot(); shadowRoot.appendChild(clone);
- 36. 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,
- 51. <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>
- 60. ཀ