https://wpt.fyi/node_modules/@polymer/polymer/lib/elements/dom-module.js

1/**
2@license
3Copyright (c) 2017 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*/
10import '../utils/boot.js';
11
12import { resolveUrl, pathFromUrl } from '../utils/resolve-url.js';
13import { strictTemplatePolicy } from '../utils/settings.js';
14
15let modules = {};
16let lcModules = {};
17/**
18 * Sets a dom-module into the global registry by id.
19 *
20 * @param {string} id dom-module id
21 * @param {DomModule} module dom-module instance
22 * @return {void}
23 */
24function setModule(id, module) {
25  // store id separate from lowercased id so that
26  // in all cases mixedCase id will stored distinctly
27  // and lowercase version is a fallback
28  modules[id] = lcModules[id.toLowerCase()] = module;
29}
30/**
31 * Retrieves a dom-module from the global registry by id.
32 *
33 * @param {string} id dom-module id
34 * @return {DomModule!} dom-module instance
35 */
36function findModule(id) {
37  return modules[id] || lcModules[id.toLowerCase()];
38}
39
40function styleOutsideTemplateCheck(inst) {
41  if (inst.querySelector('style')) {
42    console.warn('dom-module %s has style outside template', inst.id);
43  }
44}
45
46/**
47 * The `dom-module` element registers the dom it contains to the name given
48 * by the module's id attribute. It provides a unified database of dom
49 * accessible via its static `import` API.
50 *
51 * A key use case of `dom-module` is for providing custom element `<template>`s
52 * via HTML imports that are parsed by the native HTML parser, that can be
53 * relocated during a bundling pass and still looked up by `id`.
54 *
55 * Example:
56 *
57 *     <dom-module id="foo">
58 *       <img src="stuff.png">
59 *     </dom-module>
60 *
61 * Then in code in some other location that cannot access the dom-module above
62 *
63 *     let img = customElements.get('dom-module').import('foo', 'img');
64 *
65 * @customElement
66 * @extends HTMLElement
67 * @summary Custom element that provides a registry of relocatable DOM content
68 *   by `id` that is agnostic to bundling.
69 * @unrestricted
70 */
71export class DomModule extends HTMLElement {
72
73  /** @override */
74  static get observedAttributes() { return ['id']; }
75
76  /**
77   * Retrieves the element specified by the css `selector` in the module
78   * registered by `id`. For example, this.import('foo', 'img');
79   * @param {string} id The id of the dom-module in which to search.
80   * @param {string=} selector The css selector by which to find the element.
81   * @return {Element} Returns the element which matches `selector` in the
82   * module registered at the specified `id`.
83   *
84   * @export
85   * @nocollapse Referred to indirectly in style-gather.js
86   */
87  static import(id, selector) {
88    if (id) {
89      let m = findModule(id);
90      if (m && selector) {
91        return m.querySelector(selector);
92      }
93      return m;
94    }
95    return null;
96  }
97
98  /* eslint-disable no-unused-vars */
99  /**
100   * @param {string} name Name of attribute.
101   * @param {?string} old Old value of attribute.
102   * @param {?string} value Current value of attribute.
103   * @param {?string} namespace Attribute namespace.
104   * @return {void}
105   * @override
106   */
107  attributeChangedCallback(name, old, value, namespace) {
108    if (old !== value) {
109      this.register();
110    }
111  }
112  /* eslint-enable no-unused-args */
113
114  /**
115   * The absolute URL of the original location of this `dom-module`.
116   *
117   * This value will differ from this element's `ownerDocument` in the
118   * following ways:
119   * - Takes into account any `assetpath` attribute added during bundling
120   *   to indicate the original location relative to the bundled location
121   * - Uses the HTMLImports polyfill's `importForElement` API to ensure
122   *   the path is relative to the import document's location since
123   *   `ownerDocument` is not currently polyfilled
124   */
125  get assetpath() {
126    // Don't override existing assetpath.
127    if (!this.__assetpath) {
128      // note: assetpath set via an attribute must be relative to this
129      // element's location; accommodate polyfilled HTMLImports
130      const owner = window.HTMLImports && HTMLImports.importForElement ?
131        HTMLImports.importForElement(this) || document : this.ownerDocument;
132      const url = resolveUrl(
133        this.getAttribute('assetpath') || '', owner.baseURI);
134      this.__assetpath = pathFromUrl(url);
135    }
136    return this.__assetpath;
137  }
138
139  /**
140   * Registers the dom-module at a given id. This method should only be called
141   * when a dom-module is imperatively created. For
142   * example, `document.createElement('dom-module').register('foo')`.
143   * @param {string=} id The id at which to register the dom-module.
144   * @return {void}
145   */
146  register(id) {
147    id = id || this.id;
148    if (id) {
149      // Under strictTemplatePolicy, reject and null out any re-registered
150      // dom-module since it is ambiguous whether first-in or last-in is trusted
151      if (strictTemplatePolicy && findModule(id) !== undefined) {
152        setModule(id, null);
153        throw new Error(`strictTemplatePolicy: dom-module ${id} re-registered`);
154      }
155      this.id = id;
156      setModule(id, this);
157      styleOutsideTemplateCheck(this);
158    }
159  }
160}
161
162DomModule.prototype['modules'] = modules;
163
164customElements.define('dom-module', DomModule);