| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2012 The Polymer Authors. All rights reserved. | |
| 2 // | |
| 3 // Redistribution and use in source and binary forms, with or without | |
| 4 // modification, are permitted provided that the following conditions are | |
| 5 // met: | |
| 6 // | |
| 7 // * Redistributions of source code must retain the above copyright | |
| 8 // notice, this list of conditions and the following disclaimer. | |
| 9 // * Redistributions in binary form must reproduce the above | |
| 10 // copyright notice, this list of conditions and the following disclaimer | |
| 11 // in the documentation and/or other materials provided with the | |
| 12 // distribution. | |
| 13 // * Neither the name of Google Inc. nor the names of its | |
| 14 // contributors may be used to endorse or promote products derived from | |
| 15 // this software without specific prior written permission. | |
| 16 // | |
| 17 // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS | |
| 18 // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT | |
| 19 // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR | |
| 20 // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT | |
| 21 // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, | |
| 22 // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT | |
| 23 // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | |
| 24 // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | |
| 25 // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
| 26 // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
| 27 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
| 28 if (typeof WeakMap === 'undefined') { | |
| 29 (function() { | |
| 30 var defineProperty = Object.defineProperty; | |
| 31 var counter = Date.now() % 1e9; | |
| 32 | |
| 33 var WeakMap = function() { | |
| 34 this.name = '__st' + (Math.random() * 1e9 >>> 0) + (counter++ + '__'); | |
| 35 }; | |
| 36 | |
| 37 WeakMap.prototype = { | |
| 38 set: function(key, value) { | |
| 39 var entry = key[this.name]; | |
| 40 if (entry && entry[0] === key) | |
| 41 entry[1] = value; | |
| 42 else | |
| 43 defineProperty(key, this.name, {value: [key, value], writable: true}); | |
| 44 }, | |
| 45 get: function(key) { | |
| 46 var entry; | |
| 47 return (entry = key[this.name]) && entry[0] === key ? | |
| 48 entry[1] : undefined; | |
| 49 }, | |
| 50 delete: function(key) { | |
| 51 this.set(key, undefined); | |
| 52 } | |
| 53 }; | |
| 54 | |
| 55 window.WeakMap = WeakMap; | |
| 56 })(); | |
| 57 } | |
| 58 | |
| 59 window.CustomElements = window.CustomElements || {flags:{}}; | |
| 60 (function(scope){ | |
| 61 | |
| 62 var logFlags = window.logFlags || {}; | |
| 63 var IMPORT_LINK_TYPE = window.HTMLImports ? HTMLImports.IMPORT_LINK_TYPE : 'none
'; | |
| 64 | |
| 65 // walk the subtree rooted at node, applying 'find(element, data)' function | |
| 66 // to each element | |
| 67 // if 'find' returns true for 'element', do not search element's subtree | |
| 68 function findAll(node, find, data) { | |
| 69 var e = node.firstElementChild; | |
| 70 if (!e) { | |
| 71 e = node.firstChild; | |
| 72 while (e && e.nodeType !== Node.ELEMENT_NODE) { | |
| 73 e = e.nextSibling; | |
| 74 } | |
| 75 } | |
| 76 while (e) { | |
| 77 if (find(e, data) !== true) { | |
| 78 findAll(e, find, data); | |
| 79 } | |
| 80 e = e.nextElementSibling; | |
| 81 } | |
| 82 return null; | |
| 83 } | |
| 84 | |
| 85 // walk all shadowRoots on a given node. | |
| 86 function forRoots(node, cb) { | |
| 87 var root = node.shadowRoot; | |
| 88 while(root) { | |
| 89 forSubtree(root, cb); | |
| 90 root = root.olderShadowRoot; | |
| 91 } | |
| 92 } | |
| 93 | |
| 94 // walk the subtree rooted at node, including descent into shadow-roots, | |
| 95 // applying 'cb' to each element | |
| 96 function forSubtree(node, cb) { | |
| 97 //logFlags.dom && node.childNodes && node.childNodes.length && console.group('
subTree: ', node); | |
| 98 findAll(node, function(e) { | |
| 99 if (cb(e)) { | |
| 100 return true; | |
| 101 } | |
| 102 forRoots(e, cb); | |
| 103 }); | |
| 104 forRoots(node, cb); | |
| 105 //logFlags.dom && node.childNodes && node.childNodes.length && console.groupEn
d(); | |
| 106 } | |
| 107 | |
| 108 // manage lifecycle on added node | |
| 109 function added(node) { | |
| 110 if (upgrade(node)) { | |
| 111 insertedNode(node); | |
| 112 return true; | |
| 113 } | |
| 114 inserted(node); | |
| 115 } | |
| 116 | |
| 117 // manage lifecycle on added node's subtree only | |
| 118 function addedSubtree(node) { | |
| 119 forSubtree(node, function(e) { | |
| 120 if (added(e)) { | |
| 121 return true; | |
| 122 } | |
| 123 }); | |
| 124 } | |
| 125 | |
| 126 // manage lifecycle on added node and it's subtree | |
| 127 function addedNode(node) { | |
| 128 return added(node) || addedSubtree(node); | |
| 129 } | |
| 130 | |
| 131 // upgrade custom elements at node, if applicable | |
| 132 function upgrade(node) { | |
| 133 if (!node.__upgraded__ && node.nodeType === Node.ELEMENT_NODE) { | |
| 134 var type = node.getAttribute('is') || node.localName; | |
| 135 var definition = scope.registry[type]; | |
| 136 if (definition) { | |
| 137 logFlags.dom && console.group('upgrade:', node.localName); | |
| 138 scope.upgrade(node); | |
| 139 logFlags.dom && console.groupEnd(); | |
| 140 return true; | |
| 141 } | |
| 142 } | |
| 143 } | |
| 144 | |
| 145 function insertedNode(node) { | |
| 146 inserted(node); | |
| 147 if (inDocument(node)) { | |
| 148 forSubtree(node, function(e) { | |
| 149 inserted(e); | |
| 150 }); | |
| 151 } | |
| 152 } | |
| 153 | |
| 154 | |
| 155 // TODO(sorvell): on platforms without MutationObserver, mutations may not be | |
| 156 // reliable and therefore attached/detached are not reliable. | |
| 157 // To make these callbacks less likely to fail, we defer all inserts and removes | |
| 158 // to give a chance for elements to be inserted into dom. | |
| 159 // This ensures attachedCallback fires for elements that are created and | |
| 160 // immediately added to dom. | |
| 161 var hasPolyfillMutations = (!window.MutationObserver || | |
| 162 (window.MutationObserver === window.JsMutationObserver)); | |
| 163 scope.hasPolyfillMutations = hasPolyfillMutations; | |
| 164 | |
| 165 var isPendingMutations = false; | |
| 166 var pendingMutations = []; | |
| 167 function deferMutation(fn) { | |
| 168 pendingMutations.push(fn); | |
| 169 if (!isPendingMutations) { | |
| 170 isPendingMutations = true; | |
| 171 var async = (window.Platform && window.Platform.endOfMicrotask) || | |
| 172 setTimeout; | |
| 173 async(takeMutations); | |
| 174 } | |
| 175 } | |
| 176 | |
| 177 function takeMutations() { | |
| 178 isPendingMutations = false; | |
| 179 var $p = pendingMutations; | |
| 180 for (var i=0, l=$p.length, p; (i<l) && (p=$p[i]); i++) { | |
| 181 p(); | |
| 182 } | |
| 183 pendingMutations = []; | |
| 184 } | |
| 185 | |
| 186 function inserted(element) { | |
| 187 if (hasPolyfillMutations) { | |
| 188 deferMutation(function() { | |
| 189 _inserted(element); | |
| 190 }); | |
| 191 } else { | |
| 192 _inserted(element); | |
| 193 } | |
| 194 } | |
| 195 | |
| 196 // TODO(sjmiles): if there are descents into trees that can never have inDocumen
t(*) true, fix this | |
| 197 function _inserted(element) { | |
| 198 // TODO(sjmiles): it's possible we were inserted and removed in the space | |
| 199 // of one microtask, in which case we won't be 'inDocument' here | |
| 200 // But there are other cases where we are testing for inserted without | |
| 201 // specific knowledge of mutations, and must test 'inDocument' to determine | |
| 202 // whether to call inserted | |
| 203 // If we can factor these cases into separate code paths we can have | |
| 204 // better diagnostics. | |
| 205 // TODO(sjmiles): when logging, do work on all custom elements so we can | |
| 206 // track behavior even when callbacks not defined | |
| 207 //console.log('inserted: ', element.localName); | |
| 208 if (element.attachedCallback || element.detachedCallback || (element.__upgrade
d__ && logFlags.dom)) { | |
| 209 logFlags.dom && console.group('inserted:', element.localName); | |
| 210 if (inDocument(element)) { | |
| 211 element.__inserted = (element.__inserted || 0) + 1; | |
| 212 // if we are in a 'removed' state, bluntly adjust to an 'inserted' state | |
| 213 if (element.__inserted < 1) { | |
| 214 element.__inserted = 1; | |
| 215 } | |
| 216 // if we are 'over inserted', squelch the callback | |
| 217 if (element.__inserted > 1) { | |
| 218 logFlags.dom && console.warn('inserted:', element.localName, | |
| 219 'insert/remove count:', element.__inserted) | |
| 220 } else if (element.attachedCallback) { | |
| 221 logFlags.dom && console.log('inserted:', element.localName); | |
| 222 element.attachedCallback(); | |
| 223 } | |
| 224 } | |
| 225 logFlags.dom && console.groupEnd(); | |
| 226 } | |
| 227 } | |
| 228 | |
| 229 function removedNode(node) { | |
| 230 removed(node); | |
| 231 forSubtree(node, function(e) { | |
| 232 removed(e); | |
| 233 }); | |
| 234 } | |
| 235 | |
| 236 function removed(element) { | |
| 237 if (hasPolyfillMutations) { | |
| 238 deferMutation(function() { | |
| 239 _removed(element); | |
| 240 }); | |
| 241 } else { | |
| 242 _removed(element); | |
| 243 } | |
| 244 } | |
| 245 | |
| 246 function _removed(element) { | |
| 247 // TODO(sjmiles): temporary: do work on all custom elements so we can track | |
| 248 // behavior even when callbacks not defined | |
| 249 if (element.attachedCallback || element.detachedCallback || (element.__upgrade
d__ && logFlags.dom)) { | |
| 250 logFlags.dom && console.group('removed:', element.localName); | |
| 251 if (!inDocument(element)) { | |
| 252 element.__inserted = (element.__inserted || 0) - 1; | |
| 253 // if we are in a 'inserted' state, bluntly adjust to an 'removed' state | |
| 254 if (element.__inserted > 0) { | |
| 255 element.__inserted = 0; | |
| 256 } | |
| 257 // if we are 'over removed', squelch the callback | |
| 258 if (element.__inserted < 0) { | |
| 259 logFlags.dom && console.warn('removed:', element.localName, | |
| 260 'insert/remove count:', element.__inserted) | |
| 261 } else if (element.detachedCallback) { | |
| 262 element.detachedCallback(); | |
| 263 } | |
| 264 } | |
| 265 logFlags.dom && console.groupEnd(); | |
| 266 } | |
| 267 } | |
| 268 | |
| 269 // SD polyfill intrustion due mainly to the fact that 'document' | |
| 270 // is not entirely wrapped | |
| 271 function wrapIfNeeded(node) { | |
| 272 return window.ShadowDOMPolyfill ? ShadowDOMPolyfill.wrapIfNeeded(node) | |
| 273 : node; | |
| 274 } | |
| 275 | |
| 276 function inDocument(element) { | |
| 277 var p = element; | |
| 278 var doc = wrapIfNeeded(document); | |
| 279 while (p) { | |
| 280 if (p == doc) { | |
| 281 return true; | |
| 282 } | |
| 283 p = p.parentNode || p.host; | |
| 284 } | |
| 285 } | |
| 286 | |
| 287 function watchShadow(node) { | |
| 288 if (node.shadowRoot && !node.shadowRoot.__watched) { | |
| 289 logFlags.dom && console.log('watching shadow-root for: ', node.localName); | |
| 290 // watch all unwatched roots... | |
| 291 var root = node.shadowRoot; | |
| 292 while (root) { | |
| 293 watchRoot(root); | |
| 294 root = root.olderShadowRoot; | |
| 295 } | |
| 296 } | |
| 297 } | |
| 298 | |
| 299 function watchRoot(root) { | |
| 300 if (!root.__watched) { | |
| 301 observe(root); | |
| 302 root.__watched = true; | |
| 303 } | |
| 304 } | |
| 305 | |
| 306 function handler(mutations) { | |
| 307 // | |
| 308 if (logFlags.dom) { | |
| 309 var mx = mutations[0]; | |
| 310 if (mx && mx.type === 'childList' && mx.addedNodes) { | |
| 311 if (mx.addedNodes) { | |
| 312 var d = mx.addedNodes[0]; | |
| 313 while (d && d !== document && !d.host) { | |
| 314 d = d.parentNode; | |
| 315 } | |
| 316 var u = d && (d.URL || d._URL || (d.host && d.host.localName)) || ''; | |
| 317 u = u.split('/?').shift().split('/').pop(); | |
| 318 } | |
| 319 } | |
| 320 console.group('mutations (%d) [%s]', mutations.length, u || ''); | |
| 321 } | |
| 322 // | |
| 323 mutations.forEach(function(mx) { | |
| 324 //logFlags.dom && console.group('mutation'); | |
| 325 if (mx.type === 'childList') { | |
| 326 forEach(mx.addedNodes, function(n) { | |
| 327 //logFlags.dom && console.log(n.localName); | |
| 328 if (!n.localName) { | |
| 329 return; | |
| 330 } | |
| 331 // nodes added may need lifecycle management | |
| 332 addedNode(n); | |
| 333 }); | |
| 334 // removed nodes may need lifecycle management | |
| 335 forEach(mx.removedNodes, function(n) { | |
| 336 //logFlags.dom && console.log(n.localName); | |
| 337 if (!n.localName) { | |
| 338 return; | |
| 339 } | |
| 340 removedNode(n); | |
| 341 }); | |
| 342 } | |
| 343 //logFlags.dom && console.groupEnd(); | |
| 344 }); | |
| 345 logFlags.dom && console.groupEnd(); | |
| 346 }; | |
| 347 | |
| 348 var observer = new MutationObserver(handler); | |
| 349 | |
| 350 function takeRecords() { | |
| 351 // TODO(sjmiles): ask Raf why we have to call handler ourselves | |
| 352 handler(observer.takeRecords()); | |
| 353 takeMutations(); | |
| 354 } | |
| 355 | |
| 356 var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach); | |
| 357 | |
| 358 function observe(inRoot) { | |
| 359 observer.observe(inRoot, {childList: true, subtree: true}); | |
| 360 } | |
| 361 | |
| 362 function observeDocument(doc) { | |
| 363 observe(doc); | |
| 364 } | |
| 365 | |
| 366 function upgradeDocument(doc) { | |
| 367 logFlags.dom && console.group('upgradeDocument: ', (doc.baseURI).split('/').po
p()); | |
| 368 addedNode(doc); | |
| 369 logFlags.dom && console.groupEnd(); | |
| 370 } | |
| 371 | |
| 372 function upgradeDocumentTree(doc) { | |
| 373 doc = wrapIfNeeded(doc); | |
| 374 upgradeDocument(doc); | |
| 375 //console.log('upgradeDocumentTree: ', (doc.baseURI).split('/').pop()); | |
| 376 // upgrade contained imported documents | |
| 377 var imports = doc.querySelectorAll('link[rel=' + IMPORT_LINK_TYPE + ']'); | |
| 378 for (var i=0, l=imports.length, n; (i<l) && (n=imports[i]); i++) { | |
| 379 if (n.import && n.import.__parsed) { | |
| 380 upgradeDocumentTree(n.import); | |
| 381 } | |
| 382 } | |
| 383 } | |
| 384 | |
| 385 // exports | |
| 386 scope.IMPORT_LINK_TYPE = IMPORT_LINK_TYPE; | |
| 387 scope.watchShadow = watchShadow; | |
| 388 scope.upgradeDocumentTree = upgradeDocumentTree; | |
| 389 scope.upgradeAll = addedNode; | |
| 390 scope.upgradeSubtree = addedSubtree; | |
| 391 | |
| 392 scope.observeDocument = observeDocument; | |
| 393 scope.upgradeDocument = upgradeDocument; | |
| 394 | |
| 395 scope.takeRecords = takeRecords; | |
| 396 | |
| 397 })(window.CustomElements); | |
| 398 | |
| 399 /** | |
| 400 * Implements `document.register` | |
| 401 * @module CustomElements | |
| 402 */ | |
| 403 | |
| 404 /** | |
| 405 * Polyfilled extensions to the `document` object. | |
| 406 * @class Document | |
| 407 */ | |
| 408 | |
| 409 (function(scope) { | |
| 410 | |
| 411 // imports | |
| 412 | |
| 413 if (!scope) { | |
| 414 scope = window.CustomElements = {flags:{}}; | |
| 415 } | |
| 416 var flags = scope.flags; | |
| 417 | |
| 418 // native document.registerElement? | |
| 419 | |
| 420 var hasNative = Boolean(document.registerElement); | |
| 421 // TODO(sorvell): See https://github.com/Polymer/polymer/issues/399 | |
| 422 // we'll address this by defaulting to CE polyfill in the presence of the SD | |
| 423 // polyfill. This will avoid spamming excess attached/detached callbacks. | |
| 424 // If there is a compelling need to run CE native with SD polyfill, | |
| 425 // we'll need to fix this issue. | |
| 426 var useNative = !flags.register && hasNative && !window.ShadowDOMPolyfill; | |
| 427 | |
| 428 if (useNative) { | |
| 429 | |
| 430 // stub | |
| 431 var nop = function() {}; | |
| 432 | |
| 433 // exports | |
| 434 scope.registry = {}; | |
| 435 scope.upgradeElement = nop; | |
| 436 | |
| 437 scope.watchShadow = nop; | |
| 438 scope.upgrade = nop; | |
| 439 scope.upgradeAll = nop; | |
| 440 scope.upgradeSubtree = nop; | |
| 441 scope.observeDocument = nop; | |
| 442 scope.upgradeDocument = nop; | |
| 443 scope.takeRecords = nop; | |
| 444 | |
| 445 } else { | |
| 446 | |
| 447 /** | |
| 448 * Registers a custom tag name with the document. | |
| 449 * | |
| 450 * When a registered element is created, a `readyCallback` method is called | |
| 451 * in the scope of the element. The `readyCallback` method can be specified on | |
| 452 * either `options.prototype` or `options.lifecycle` with the latter taking | |
| 453 * precedence. | |
| 454 * | |
| 455 * @method register | |
| 456 * @param {String} name The tag name to register. Must include a dash ('-'), | |
| 457 * for example 'x-component'. | |
| 458 * @param {Object} options | |
| 459 * @param {String} [options.extends] | |
| 460 * (_off spec_) Tag name of an element to extend (or blank for a new | |
| 461 * element). This parameter is not part of the specification, but instead | |
| 462 * is a hint for the polyfill because the extendee is difficult to infer. | |
| 463 * Remember that the input prototype must chain to the extended element's | |
| 464 * prototype (or HTMLElement.prototype) regardless of the value of | |
| 465 * `extends`. | |
| 466 * @param {Object} options.prototype The prototype to use for the new | |
| 467 * element. The prototype must inherit from HTMLElement. | |
| 468 * @param {Object} [options.lifecycle] | |
| 469 * Callbacks that fire at important phases in the life of the custom | |
| 470 * element. | |
| 471 * | |
| 472 * @example | |
| 473 * FancyButton = document.registerElement("fancy-button", { | |
| 474 * extends: 'button', | |
| 475 * prototype: Object.create(HTMLButtonElement.prototype, { | |
| 476 * readyCallback: { | |
| 477 * value: function() { | |
| 478 * console.log("a fancy-button was created", | |
| 479 * } | |
| 480 * } | |
| 481 * }) | |
| 482 * }); | |
| 483 * @return {Function} Constructor for the newly registered type. | |
| 484 */ | |
| 485 function register(name, options) { | |
| 486 //console.warn('document.registerElement("' + name + '", ', options, ')'); | |
| 487 // construct a defintion out of options | |
| 488 // TODO(sjmiles): probably should clone options instead of mutating it | |
| 489 var definition = options || {}; | |
| 490 if (!name) { | |
| 491 // TODO(sjmiles): replace with more appropriate error (EricB can probably | |
| 492 // offer guidance) | |
| 493 throw new Error('document.registerElement: first argument `name` must not
be empty'); | |
| 494 } | |
| 495 if (name.indexOf('-') < 0) { | |
| 496 // TODO(sjmiles): replace with more appropriate error (EricB can probably | |
| 497 // offer guidance) | |
| 498 throw new Error('document.registerElement: first argument (\'name\') must
contain a dash (\'-\'). Argument provided was \'' + String(name) + '\'.'); | |
| 499 } | |
| 500 // elements may only be registered once | |
| 501 if (getRegisteredDefinition(name)) { | |
| 502 throw new Error('DuplicateDefinitionError: a type with name \'' + String(n
ame) + '\' is already registered'); | |
| 503 } | |
| 504 // must have a prototype, default to an extension of HTMLElement | |
| 505 // TODO(sjmiles): probably should throw if no prototype, check spec | |
| 506 if (!definition.prototype) { | |
| 507 // TODO(sjmiles): replace with more appropriate error (EricB can probably | |
| 508 // offer guidance) | |
| 509 throw new Error('Options missing required prototype property'); | |
| 510 } | |
| 511 // record name | |
| 512 definition.__name = name.toLowerCase(); | |
| 513 // ensure a lifecycle object so we don't have to null test it | |
| 514 definition.lifecycle = definition.lifecycle || {}; | |
| 515 // build a list of ancestral custom elements (for native base detection) | |
| 516 // TODO(sjmiles): we used to need to store this, but current code only | |
| 517 // uses it in 'resolveTagName': it should probably be inlined | |
| 518 definition.ancestry = ancestry(definition.extends); | |
| 519 // extensions of native specializations of HTMLElement require localName | |
| 520 // to remain native, and use secondary 'is' specifier for extension type | |
| 521 resolveTagName(definition); | |
| 522 // some platforms require modifications to the user-supplied prototype | |
| 523 // chain | |
| 524 resolvePrototypeChain(definition); | |
| 525 // overrides to implement attributeChanged callback | |
| 526 overrideAttributeApi(definition.prototype); | |
| 527 // 7.1.5: Register the DEFINITION with DOCUMENT | |
| 528 registerDefinition(definition.__name, definition); | |
| 529 // 7.1.7. Run custom element constructor generation algorithm with PROTOTYPE | |
| 530 // 7.1.8. Return the output of the previous step. | |
| 531 definition.ctor = generateConstructor(definition); | |
| 532 definition.ctor.prototype = definition.prototype; | |
| 533 // force our .constructor to be our actual constructor | |
| 534 definition.prototype.constructor = definition.ctor; | |
| 535 // if initial parsing is complete | |
| 536 if (scope.ready || scope.performedInitialDocumentUpgrade) { | |
| 537 // upgrade any pre-existing nodes of this type | |
| 538 scope.upgradeDocumentTree(document); | |
| 539 } | |
| 540 return definition.ctor; | |
| 541 } | |
| 542 | |
| 543 function ancestry(extnds) { | |
| 544 var extendee = getRegisteredDefinition(extnds); | |
| 545 if (extendee) { | |
| 546 return ancestry(extendee.extends).concat([extendee]); | |
| 547 } | |
| 548 return []; | |
| 549 } | |
| 550 | |
| 551 function resolveTagName(definition) { | |
| 552 // if we are explicitly extending something, that thing is our | |
| 553 // baseTag, unless it represents a custom component | |
| 554 var baseTag = definition.extends; | |
| 555 // if our ancestry includes custom components, we only have a | |
| 556 // baseTag if one of them does | |
| 557 for (var i=0, a; (a=definition.ancestry[i]); i++) { | |
| 558 baseTag = a.is && a.tag; | |
| 559 } | |
| 560 // our tag is our baseTag, if it exists, and otherwise just our name | |
| 561 definition.tag = baseTag || definition.__name; | |
| 562 if (baseTag) { | |
| 563 // if there is a base tag, use secondary 'is' specifier | |
| 564 definition.is = definition.__name; | |
| 565 } | |
| 566 } | |
| 567 | |
| 568 function resolvePrototypeChain(definition) { | |
| 569 // if we don't support __proto__ we need to locate the native level | |
| 570 // prototype for precise mixing in | |
| 571 if (!Object.__proto__) { | |
| 572 // default prototype | |
| 573 var nativePrototype = HTMLElement.prototype; | |
| 574 // work out prototype when using type-extension | |
| 575 if (definition.is) { | |
| 576 var inst = document.createElement(definition.tag); | |
| 577 nativePrototype = Object.getPrototypeOf(inst); | |
| 578 } | |
| 579 // ensure __proto__ reference is installed at each point on the prototype | |
| 580 // chain. | |
| 581 // NOTE: On platforms without __proto__, a mixin strategy is used instead | |
| 582 // of prototype swizzling. In this case, this generated __proto__ provides | |
| 583 // limited support for prototype traversal. | |
| 584 var proto = definition.prototype, ancestor; | |
| 585 while (proto && (proto !== nativePrototype)) { | |
| 586 var ancestor = Object.getPrototypeOf(proto); | |
| 587 proto.__proto__ = ancestor; | |
| 588 proto = ancestor; | |
| 589 } | |
| 590 } | |
| 591 // cache this in case of mixin | |
| 592 definition.native = nativePrototype; | |
| 593 } | |
| 594 | |
| 595 // SECTION 4 | |
| 596 | |
| 597 function instantiate(definition) { | |
| 598 // 4.a.1. Create a new object that implements PROTOTYPE | |
| 599 // 4.a.2. Let ELEMENT by this new object | |
| 600 // | |
| 601 // the custom element instantiation algorithm must also ensure that the | |
| 602 // output is a valid DOM element with the proper wrapper in place. | |
| 603 // | |
| 604 return upgrade(domCreateElement(definition.tag), definition); | |
| 605 } | |
| 606 | |
| 607 function upgrade(element, definition) { | |
| 608 // some definitions specify an 'is' attribute | |
| 609 if (definition.is) { | |
| 610 element.setAttribute('is', definition.is); | |
| 611 } | |
| 612 // remove 'unresolved' attr, which is a standin for :unresolved. | |
| 613 element.removeAttribute('unresolved'); | |
| 614 // make 'element' implement definition.prototype | |
| 615 implement(element, definition); | |
| 616 // flag as upgraded | |
| 617 element.__upgraded__ = true; | |
| 618 // there should never be a shadow root on element at this point | |
| 619 // we require child nodes be upgraded before `created` | |
| 620 scope.upgradeSubtree(element); | |
| 621 // lifecycle management | |
| 622 created(element); | |
| 623 // OUTPUT | |
| 624 return element; | |
| 625 } | |
| 626 | |
| 627 function implement(element, definition) { | |
| 628 // prototype swizzling is best | |
| 629 if (Object.__proto__) { | |
| 630 element.__proto__ = definition.prototype; | |
| 631 } else { | |
| 632 // where above we can re-acquire inPrototype via | |
| 633 // getPrototypeOf(Element), we cannot do so when | |
| 634 // we use mixin, so we install a magic reference | |
| 635 customMixin(element, definition.prototype, definition.native); | |
| 636 | |
| 637 // Dart note: make sure we pick up the right constructor. | |
| 638 // dart2js depends on this for dart:mirrors caching to work. | |
| 639 // See tests/html/custom/mirrors_test.dart | |
| 640 element.constructor = definition.prototype.constructor; | |
| 641 element.__proto__ = definition.prototype; | |
| 642 } | |
| 643 } | |
| 644 | |
| 645 function customMixin(inTarget, inSrc, inNative) { | |
| 646 // TODO(sjmiles): 'used' allows us to only copy the 'youngest' version of | |
| 647 // any property. This set should be precalculated. We also need to | |
| 648 // consider this for supporting 'super'. | |
| 649 var used = {}; | |
| 650 // start with inSrc | |
| 651 var p = inSrc; | |
| 652 // sometimes the default is HTMLUnknownElement.prototype instead of | |
| 653 // HTMLElement.prototype, so we add a test | |
| 654 // the idea is to avoid mixing in native prototypes, so adding | |
| 655 // the second test is WLOG | |
| 656 while (p !== inNative && p !== HTMLUnknownElement.prototype) { | |
| 657 var keys = Object.getOwnPropertyNames(p); | |
| 658 for (var i=0, k; k=keys[i]; i++) { | |
| 659 if (!used[k]) { | |
| 660 Object.defineProperty(inTarget, k, | |
| 661 Object.getOwnPropertyDescriptor(p, k)); | |
| 662 used[k] = 1; | |
| 663 } | |
| 664 } | |
| 665 p = Object.getPrototypeOf(p); | |
| 666 } | |
| 667 } | |
| 668 | |
| 669 function created(element) { | |
| 670 // invoke createdCallback | |
| 671 if (element.createdCallback) { | |
| 672 element.createdCallback(); | |
| 673 } | |
| 674 } | |
| 675 | |
| 676 // attribute watching | |
| 677 | |
| 678 function overrideAttributeApi(prototype) { | |
| 679 // overrides to implement callbacks | |
| 680 // TODO(sjmiles): should support access via .attributes NamedNodeMap | |
| 681 // TODO(sjmiles): preserves user defined overrides, if any | |
| 682 if (prototype.setAttribute._polyfilled) { | |
| 683 return; | |
| 684 } | |
| 685 var setAttribute = prototype.setAttribute; | |
| 686 prototype.setAttribute = function(name, value) { | |
| 687 changeAttribute.call(this, name, value, setAttribute); | |
| 688 } | |
| 689 var removeAttribute = prototype.removeAttribute; | |
| 690 prototype.removeAttribute = function(name) { | |
| 691 changeAttribute.call(this, name, null, removeAttribute); | |
| 692 } | |
| 693 prototype.setAttribute._polyfilled = true; | |
| 694 } | |
| 695 | |
| 696 // https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/ | |
| 697 // index.html#dfn-attribute-changed-callback | |
| 698 function changeAttribute(name, value, operation) { | |
| 699 var oldValue = this.getAttribute(name); | |
| 700 operation.apply(this, arguments); | |
| 701 var newValue = this.getAttribute(name); | |
| 702 if (this.attributeChangedCallback | |
| 703 && (newValue !== oldValue)) { | |
| 704 this.attributeChangedCallback(name, oldValue, newValue); | |
| 705 } | |
| 706 } | |
| 707 | |
| 708 // element registry (maps tag names to definitions) | |
| 709 | |
| 710 var registry = {}; | |
| 711 | |
| 712 function getRegisteredDefinition(name) { | |
| 713 if (name) { | |
| 714 return registry[name.toLowerCase()]; | |
| 715 } | |
| 716 } | |
| 717 | |
| 718 function registerDefinition(name, definition) { | |
| 719 if (registry[name]) { | |
| 720 throw new Error('a type with that name is already registered.'); | |
| 721 } | |
| 722 registry[name] = definition; | |
| 723 } | |
| 724 | |
| 725 function generateConstructor(definition) { | |
| 726 return function() { | |
| 727 return instantiate(definition); | |
| 728 }; | |
| 729 } | |
| 730 | |
| 731 function createElement(tag, typeExtension) { | |
| 732 // TODO(sjmiles): ignore 'tag' when using 'typeExtension', we could | |
| 733 // error check it, or perhaps there should only ever be one argument | |
| 734 var definition = getRegisteredDefinition(typeExtension || tag); | |
| 735 if (definition) { | |
| 736 if (tag == definition.tag && typeExtension == definition.is) { | |
| 737 return new definition.ctor(); | |
| 738 } | |
| 739 // Handle empty string for type extension. | |
| 740 if (!typeExtension && !definition.is) { | |
| 741 return new definition.ctor(); | |
| 742 } | |
| 743 } | |
| 744 | |
| 745 if (typeExtension) { | |
| 746 var element = createElement(tag); | |
| 747 element.setAttribute('is', typeExtension); | |
| 748 return element; | |
| 749 } | |
| 750 var element = domCreateElement(tag); | |
| 751 // Custom tags should be HTMLElements even if not upgraded. | |
| 752 if (tag.indexOf('-') >= 0) { | |
| 753 implement(element, HTMLElement); | |
| 754 } | |
| 755 return element; | |
| 756 } | |
| 757 | |
| 758 function upgradeElement(element) { | |
| 759 if (!element.__upgraded__ && (element.nodeType === Node.ELEMENT_NODE)) { | |
| 760 var is = element.getAttribute('is'); | |
| 761 var definition = registry[is || element.localName]; | |
| 762 if (definition) { | |
| 763 if (is && definition.tag == element.localName) { | |
| 764 return upgrade(element, definition); | |
| 765 } else if (!is && !definition.extends) { | |
| 766 return upgrade(element, definition); | |
| 767 } | |
| 768 } | |
| 769 } | |
| 770 } | |
| 771 | |
| 772 function cloneNode(deep) { | |
| 773 // call original clone | |
| 774 var n = domCloneNode.call(this, deep); | |
| 775 // upgrade the element and subtree | |
| 776 scope.upgradeAll(n); | |
| 777 // return the clone | |
| 778 return n; | |
| 779 } | |
| 780 // capture native createElement before we override it | |
| 781 | |
| 782 var domCreateElement = document.createElement.bind(document); | |
| 783 | |
| 784 // capture native cloneNode before we override it | |
| 785 | |
| 786 var domCloneNode = Node.prototype.cloneNode; | |
| 787 | |
| 788 // exports | |
| 789 | |
| 790 document.registerElement = register; | |
| 791 document.createElement = createElement; // override | |
| 792 Node.prototype.cloneNode = cloneNode; // override | |
| 793 | |
| 794 scope.registry = registry; | |
| 795 | |
| 796 /** | |
| 797 * Upgrade an element to a custom element. Upgrading an element | |
| 798 * causes the custom prototype to be applied, an `is` attribute | |
| 799 * to be attached (as needed), and invocation of the `readyCallback`. | |
| 800 * `upgrade` does nothing if the element is already upgraded, or | |
| 801 * if it matches no registered custom tag name. | |
| 802 * | |
| 803 * @method ugprade | |
| 804 * @param {Element} element The element to upgrade. | |
| 805 * @return {Element} The upgraded element. | |
| 806 */ | |
| 807 scope.upgrade = upgradeElement; | |
| 808 } | |
| 809 | |
| 810 // bc | |
| 811 document.register = document.registerElement; | |
| 812 | |
| 813 scope.hasNative = hasNative; | |
| 814 scope.useNative = useNative; | |
| 815 | |
| 816 })(window.CustomElements); | |
| 817 | |
| 818 (function(scope) { | |
| 819 | |
| 820 // import | |
| 821 | |
| 822 var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE; | |
| 823 | |
| 824 // highlander object for parsing a document tree | |
| 825 | |
| 826 var parser = { | |
| 827 selectors: [ | |
| 828 'link[rel=' + IMPORT_LINK_TYPE + ']' | |
| 829 ], | |
| 830 map: { | |
| 831 link: 'parseLink' | |
| 832 }, | |
| 833 parse: function(inDocument) { | |
| 834 if (!inDocument.__parsed) { | |
| 835 // only parse once | |
| 836 inDocument.__parsed = true; | |
| 837 // all parsable elements in inDocument (depth-first pre-order traversal) | |
| 838 var elts = inDocument.querySelectorAll(parser.selectors); | |
| 839 // for each parsable node type, call the mapped parsing method | |
| 840 forEach(elts, function(e) { | |
| 841 parser[parser.map[e.localName]](e); | |
| 842 }); | |
| 843 // upgrade all upgradeable static elements, anything dynamically | |
| 844 // created should be caught by observer | |
| 845 CustomElements.upgradeDocument(inDocument); | |
| 846 // observe document for dom changes | |
| 847 CustomElements.observeDocument(inDocument); | |
| 848 } | |
| 849 }, | |
| 850 parseLink: function(linkElt) { | |
| 851 // imports | |
| 852 if (isDocumentLink(linkElt)) { | |
| 853 this.parseImport(linkElt); | |
| 854 } | |
| 855 }, | |
| 856 parseImport: function(linkElt) { | |
| 857 if (linkElt.import) { | |
| 858 parser.parse(linkElt.import); | |
| 859 } | |
| 860 } | |
| 861 }; | |
| 862 | |
| 863 function isDocumentLink(inElt) { | |
| 864 return (inElt.localName === 'link' | |
| 865 && inElt.getAttribute('rel') === IMPORT_LINK_TYPE); | |
| 866 } | |
| 867 | |
| 868 var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach); | |
| 869 | |
| 870 // exports | |
| 871 | |
| 872 scope.parser = parser; | |
| 873 scope.IMPORT_LINK_TYPE = IMPORT_LINK_TYPE; | |
| 874 | |
| 875 })(window.CustomElements); | |
| 876 (function(scope){ | |
| 877 | |
| 878 // bootstrap parsing | |
| 879 function bootstrap() { | |
| 880 // parse document | |
| 881 CustomElements.parser.parse(document); | |
| 882 // one more pass before register is 'live' | |
| 883 CustomElements.upgradeDocument(document); | |
| 884 CustomElements.performedInitialDocumentUpgrade = true; | |
| 885 // choose async | |
| 886 var async = window.Platform && Platform.endOfMicrotask ? | |
| 887 Platform.endOfMicrotask : | |
| 888 setTimeout; | |
| 889 async(function() { | |
| 890 // set internal 'ready' flag, now document.registerElement will trigger | |
| 891 // synchronous upgrades | |
| 892 CustomElements.ready = true; | |
| 893 // capture blunt profiling data | |
| 894 CustomElements.readyTime = Date.now(); | |
| 895 if (window.HTMLImports) { | |
| 896 CustomElements.elapsed = CustomElements.readyTime - HTMLImports.readyTime; | |
| 897 } | |
| 898 // notify the system that we are bootstrapped | |
| 899 document.dispatchEvent( | |
| 900 new CustomEvent('WebComponentsReady', {bubbles: true}) | |
| 901 ); | |
| 902 }); | |
| 903 } | |
| 904 | |
| 905 // CustomEvent shim for IE | |
| 906 if (typeof window.CustomEvent !== 'function') { | |
| 907 window.CustomEvent = function(inType) { | |
| 908 var e = document.createEvent('HTMLEvents'); | |
| 909 e.initEvent(inType, true, true); | |
| 910 return e; | |
| 911 }; | |
| 912 } | |
| 913 | |
| 914 // When loading at readyState complete time (or via flag), boot custom elements | |
| 915 // immediately. | |
| 916 // If relevant, HTMLImports must already be loaded. | |
| 917 if (document.readyState === 'complete' || scope.flags.eager) { | |
| 918 bootstrap(); | |
| 919 // When loading at readyState interactive time, bootstrap only if HTMLImports | |
| 920 // are not pending. Also avoid IE as the semantics of this state are unreliable. | |
| 921 } else if (document.readyState === 'interactive' && !window.attachEvent && | |
| 922 (!window.HTMLImports || window.HTMLImports.ready)) { | |
| 923 bootstrap(); | |
| 924 // When loading at other readyStates, wait for the appropriate DOM event to | |
| 925 // bootstrap. | |
| 926 } else { | |
| 927 var loadEvent = window.HTMLImports && !HTMLImports.ready | |
| 928 ? 'HTMLImportsLoaded' | |
| 929 : document.readyState == 'loading' ? 'DOMContentLoaded' : 'load'; | |
| 930 window.addEventListener(loadEvent, bootstrap); | |
| 931 } | |
| 932 | |
| 933 })(window.CustomElements); | |
| 934 | |
| 935 (function() { | |
| 936 // Patch to allow custom element and shadow dom to work together, from: | |
| 937 // https://github.com/Polymer/platform-dev/blob/60ece8c323c5d9325cbfdfd6e8cd180d
4f38a3bc/src/patches-shadowdom-polyfill.js | |
| 938 // include .host reference | |
| 939 if (HTMLElement.prototype.createShadowRoot) { | |
| 940 var originalCreateShadowRoot = HTMLElement.prototype.createShadowRoot; | |
| 941 HTMLElement.prototype.createShadowRoot = function() { | |
| 942 var root = originalCreateShadowRoot.call(this); | |
| 943 root.host = this; | |
| 944 CustomElements.watchShadow(this); | |
| 945 return root; | |
| 946 } | |
| 947 } | |
| 948 | |
| 949 | |
| 950 // Patch to allow custom elements and shadow dom to work together, from: | |
| 951 // https://github.com/Polymer/platform-dev/blob/2bb9c56d90f9ac19c2e65cdad368668a
ff514f14/src/patches-custom-elements.js | |
| 952 if (window.ShadowDOMPolyfill) { | |
| 953 | |
| 954 // ensure wrapped inputs for these functions | |
| 955 var fns = ['upgradeAll', 'upgradeSubtree', 'observeDocument', | |
| 956 'upgradeDocument']; | |
| 957 | |
| 958 // cache originals | |
| 959 var original = {}; | |
| 960 fns.forEach(function(fn) { | |
| 961 original[fn] = CustomElements[fn]; | |
| 962 }); | |
| 963 | |
| 964 // override | |
| 965 fns.forEach(function(fn) { | |
| 966 CustomElements[fn] = function(inNode) { | |
| 967 return original[fn](window.ShadowDOMPolyfill.wrapIfNeeded(inNode)); | |
| 968 }; | |
| 969 }); | |
| 970 | |
| 971 } | |
| 972 | |
| 973 // Patch to make importNode work. | |
| 974 // https://github.com/Polymer/platform-dev/blob/64a92f273462f04a84abbe2f054294f2
b62dbcd6/src/patches-mdv.js | |
| 975 if (window.CustomElements && !CustomElements.useNative) { | |
| 976 var originalImportNode = Document.prototype.importNode; | |
| 977 Document.prototype.importNode = function(node, deep) { | |
| 978 var imported = originalImportNode.call(this, node, deep); | |
| 979 CustomElements.upgradeAll(imported); | |
| 980 return imported; | |
| 981 } | |
| 982 } | |
| 983 | |
| 984 })(); | |
| OLD | NEW |