1/** 2@license 3Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9*/ 10 11'use strict'; 12 13const ShadyCSS = window.ShadyCSS; 14 15window.registerSVGElement = () => { 16 const LOCAL_NAME = 'svg-in-shadow'; 17 const TEMPLATE = document.querySelector(`template#${LOCAL_NAME}`); 18 ShadyCSS.prepareTemplate(TEMPLATE, LOCAL_NAME); 19 20 class SVGInShadow extends window.HTMLElement { 21 connectedCallback() { 22 ShadyCSS.styleElement(this); 23 this.attachShadow({mode: 'open'}); 24 this.shadowRoot.appendChild(document.importNode(TEMPLATE.content, true)); 25 } 26 27 get svg() { 28 return this.shadowRoot.querySelector('svg'); 29 } 30 31 addCircle() { 32 const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); 33 const x = 10 + Math.floor(80 * Math.random()); 34 const y = 10 + Math.floor(80 * Math.random()); 35 circle.setAttribute('cx', String(x)); 36 circle.setAttribute('cy', String(y)); 37 circle.setAttribute('r', '10'); 38 this.svg.appendChild(circle); 39 return circle; 40 } 41 } 42 window.customElements.define(LOCAL_NAME, SVGInShadow); 43};