Skip to content

Commit b85b641

Browse files
committed
Remove forceUpgraded check in dom-module.import
Multiple elements depend on dom-module.import and may register before dom-module is registered. With the forceUpgraded check, only the first module to call .import will be upgraded, typically custom-style. This will break the subsiquent elements, such as dom-template. Fixes Polymer/vulcanize#234
1 parent 5605634 commit b85b641

1 file changed

Lines changed: 110 additions & 111 deletions

File tree

‎src/lib/dom-module.html‎

Lines changed: 110 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,110 @@
1-
<script>
2-
3-
(function() {
4-
5-
var modules = {};
6-
var lcModules = {};
7-
var findModule = function(id) {
8-
return modules[id] || lcModules[id.toLowerCase()];
9-
}
10-
11-
/**
12-
* The `dom-module` element registers the dom it contains to the name given
13-
* by the module's id attribute. It provides a unified database of dom
14-
* accessible via any dom-module element. Use the `import(id, selector)`
15-
* method to locate dom within this database. For example,
16-
*
17-
* <dom-module id="foo">
18-
* <img src="stuff.png">
19-
* </dom-module>
20-
*
21-
* Then in code in some other location that cannot access the dom-module above
22-
*
23-
* var img = document.createElement('dom-module').import('foo', 'img');
24-
*
25-
*/
26-
var DomModule = function() {
27-
return document.createElement('dom-module');
28-
};
29-
30-
DomModule.prototype = Object.create(HTMLElement.prototype);
31-
32-
Polymer.Base.extend(DomModule.prototype, {
33-
34-
constructor: DomModule,
35-
36-
createdCallback: function() {
37-
this.register();
38-
},
39-
40-
/**
41-
* Registers the dom-module at a given id. This method should only be called
42-
* when a dom-module is imperatively created. For
43-
* example, `document.createElement('dom-module').register('foo')`.
44-
* @method register
45-
* @param {String} id The id at which to register the dom-module.
46-
*/
47-
register: function(id) {
48-
var id = id || this.id ||
49-
this.getAttribute('name') || this.getAttribute('is');
50-
if (id) {
51-
this.id = id;
52-
// store id separate from lowercased id so that
53-
// in all cases mixedCase id will stored distinctly
54-
// and lowercase version is a fallback
55-
modules[id] = this;
56-
lcModules[id.toLowerCase()] = this;
57-
}
58-
},
59-
60-
/**
61-
* Retrieves the dom specified by `selector` in the module specified by
62-
* `id`. For example, this.import('foo', 'img');
63-
* @method register
64-
* @param {String} id
65-
* @param {String} selector
66-
* @return {Object} Returns the dom which matches `selector` in the module
67-
* at the specified `id`.
68-
*/
69-
import: function(id, selector) {
70-
var m = findModule(id);
71-
if (!m) {
72-
// If polyfilling, a script can run before a dom-module element
73-
// is upgraded. We force the containing document to upgrade
74-
// and try again to workaround this polyfill limitation.
75-
forceDocumentUpgrade();
76-
m = findModule(id);
77-
}
78-
if (m && selector) {
79-
m = m.querySelector(selector);
80-
}
81-
return m;
82-
}
83-
84-
});
85-
86-
// NOTE: HTMLImports polyfill does not
87-
// block scripts on upgrading elements. However, we want to ensure that
88-
// any dom-module in the tree is available prior to a subsequent script
89-
// processing.
90-
// Therefore, we force any dom-modules in the tree to upgrade when dom-module
91-
// is registered by temporarily setting CE polyfill to crawl the entire
92-
// imports tree. (Note: this should only upgrade any imports that have been
93-
// loaded by this point. In addition the HTMLImports polyfill should be
94-
// changed to upgrade elements prior to running any scripts.)
95-
var cePolyfill = window.CustomElements && !CustomElements.useNative;
96-
document.registerElement('dom-module', DomModule);
97-
98-
function forceDocumentUpgrade() {
99-
if (cePolyfill) {
100-
var script = document._currentScript || document.currentScript;
101-
var doc = script && script.ownerDocument;
102-
if (doc && !doc.__customElementsForceUpgraded) {
103-
doc.__customElementsForceUpgraded = true;
104-
CustomElements.upgradeAll(doc);
105-
}
106-
}
107-
}
108-
109-
})();
110-
111-
</script>
1+
<script>
2+
3+
(function() {
4+
5+
var modules = {};
6+
var lcModules = {};
7+
var findModule = function(id) {
8+
return modules[id] || lcModules[id.toLowerCase()];
9+
}
10+
11+
/**
12+
* The `dom-module` element registers the dom it contains to the name given
13+
* by the module's id attribute. It provides a unified database of dom
14+
* accessible via any dom-module element. Use the `import(id, selector)`
15+
* method to locate dom within this database. For example,
16+
*
17+
* <dom-module id="foo">
18+
* <img src="stuff.png">
19+
* </dom-module>
20+
*
21+
* Then in code in some other location that cannot access the dom-module above
22+
*
23+
* var img = document.createElement('dom-module').import('foo', 'img');
24+
*
25+
*/
26+
var DomModule = function() {
27+
return document.createElement('dom-module');
28+
};
29+
30+
DomModule.prototype = Object.create(HTMLElement.prototype);
31+
32+
Polymer.Base.extend(DomModule.prototype, {
33+
34+
constructor: DomModule,
35+
36+
createdCallback: function() {
37+
this.register();
38+
},
39+
40+
/**
41+
* Registers the dom-module at a given id. This method should only be called
42+
* when a dom-module is imperatively created. For
43+
* example, `document.createElement('dom-module').register('foo')`.
44+
* @method register
45+
* @param {String} id The id at which to register the dom-module.
46+
*/
47+
register: function(id) {
48+
var id = id || this.id ||
49+
this.getAttribute('name') || this.getAttribute('is');
50+
if (id) {
51+
this.id = id;
52+
// store id separate from lowercased id so that
53+
// in all cases mixedCase id will stored distinctly
54+
// and lowercase version is a fallback
55+
modules[id] = this;
56+
lcModules[id.toLowerCase()] = this;
57+
}
58+
},
59+
60+
/**
61+
* Retrieves the dom specified by `selector` in the module specified by
62+
* `id`. For example, this.import('foo', 'img');
63+
* @method register
64+
* @param {String} id
65+
* @param {String} selector
66+
* @return {Object} Returns the dom which matches `selector` in the module
67+
* at the specified `id`.
68+
*/
69+
import: function(id, selector) {
70+
var m = findModule(id);
71+
if (!m) {
72+
// If polyfilling, a script can run before a dom-module element
73+
// is upgraded. We force the containing document to upgrade
74+
// and try again to workaround this polyfill limitation.
75+
forceDocumentUpgrade();
76+
m = findModule(id);
77+
}
78+
if (m && selector) {
79+
m = m.querySelector(selector);
80+
}
81+
return m;
82+
}
83+
84+
});
85+
86+
// NOTE: HTMLImports polyfill does not
87+
// block scripts on upgrading elements. However, we want to ensure that
88+
// any dom-module in the tree is available prior to a subsequent script
89+
// processing.
90+
// Therefore, we force any dom-modules in the tree to upgrade when dom-module
91+
// is registered by temporarily setting CE polyfill to crawl the entire
92+
// imports tree. (Note: this should only upgrade any imports that have been
93+
// loaded by this point. In addition the HTMLImports polyfill should be
94+
// changed to upgrade elements prior to running any scripts.)
95+
var cePolyfill = window.CustomElements && !CustomElements.useNative;
96+
document.registerElement('dom-module', DomModule);
97+
98+
function forceDocumentUpgrade() {
99+
if (cePolyfill) {
100+
var script = document._currentScript || document.currentScript;
101+
var doc = script && script.ownerDocument;
102+
if (doc) {
103+
CustomElements.upgradeAll(doc);
104+
}
105+
}
106+
}
107+
108+
})();
109+
110+
</script>

0 commit comments

Comments
 (0)