Skip to content
This repository has been archived by the owner on Oct 26, 2021. It is now read-only.

Implementing customized built-in elements #42

Closed
Closed
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
a7073c4
Remove test assumption that `customElements` exists.
bicknellr Dec 14, 2016
ee326ff
Use one-liner for forcing the polyfill.
bicknellr Dec 17, 2016
f0eb664
Update WCT and webcomponentsjs.
bicknellr Dec 17, 2016
8ffa12b
Update HTMLImports polyfill path.
bicknellr Dec 17, 2016
555e61e
Remove use of `String#endsWith`.
bicknellr Dec 19, 2016
e089691
Update WCT to 6.0.0-prerelease.3 for ES2015 compilation.
bicknellr Dec 19, 2016
0265c2d
Add bower dependency and installation.
bicknellr Dec 19, 2016
775b224
Add promise polyfill for tests.
bicknellr Dec 19, 2016
e6eddb5
Test for 'HTMLElement#constructor' writable / configurable flags that…
bicknellr Dec 19, 2016
0c82e24
Remove unnecessary `HTMLElement#constructor` descriptor test.
bicknellr Dec 19, 2016
4485b37
It's sort of working
joeldenning Jan 5, 2017
851fd1b
subclassing things
joeldenning Jan 9, 2017
c8f7e69
Merge branch 'fix-tests' into customized-builtin
joeldenning Jan 9, 2017
93d812a
Tests passing
joeldenning Jan 9, 2017
5e15bb8
Google closure type fixing
joeldenning Jan 9, 2017
270f834
Removing built files
joeldenning Jan 9, 2017
4259dda
Self review 1
joeldenning Jan 9, 2017
2a6a70d
Self review 2
joeldenning Jan 9, 2017
5dce865
Fixing bug where autonomous elements had is="" attribute
joeldenning Jan 9, 2017
2feec3e
Removing custom-elements.min.js changes
joeldenning Jan 10, 2017
c8c6627
Domenic's feedback - use node.localName instead of tagName
joeldenning Jan 10, 2017
7233ea6
Fixing closure compiler warnings
joeldenning Jan 12, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Fixing closure compiler warnings
joeldenning committed Jan 12, 2017
commit 7233ea625e6b53cad5c115ff0c4366ad131a8f03
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -16,7 +16,6 @@
"url": "https://github.com/webcomponents/custom-elements/issues"
},
"scripts": {
"install": "$(npm bin)/bower install",
"build": "gulp",
"test": "wct"
},
9 changes: 5 additions & 4 deletions src/custom-elements.js
Original file line number Diff line number Diff line change
@@ -218,7 +218,7 @@ let Deferred;

// 7.2:
const el = document.createElement(options.extends);
if (el instanceof window.HTMLUnknownElement) {
if (el instanceof window['HTMLUnknownElement']) {
throw new Error(`Cannot extend '${options.extends}': is not a real HTMLElement`);
}

@@ -460,7 +460,7 @@ let Deferred;
do {
const node = /** @type {!HTMLElement} */ (walker.currentNode);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW I think this annotation is incorrect; you may have non-HTMLElements in a document, usually SVG.

if (node.getAttribute('is')) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not super familiar with this polyfill, but if it hooks element creation it's more accurate to cache 'is' at creation time. The HTML spec calls this the element's "is value" IIRC.

I guess you probably need to look at attributes for parsed elements.

You may want to keep those values in a side WeakMap of Element -> string. That will avoid the closure type problem you mention below.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that not looking at the is attribute would be ideal, but like you pointed out I don't think it's possible to avoid it for parsed elements. Since (per the spec) updating the is attribute after creation should not cause an element to be upgraded to a custom element, what I did here was only look at the is attribute when the MutationObserver says that a node was added, and never look at the is attribute after that.

Since this polyfill has been rewritten to rely on monkeypatched methods instead of mutation observers, I'll have to figure out how to get the same functionality without the MutationObserver telling me if it is a newly added node or not.

node.is = node.getAttribute('is');
node['is'] = node.getAttribute('is');
}
this._addElement(node, visitedNodes);
} while (walker.nextNode())
@@ -649,12 +649,13 @@ let Deferred;
/**
* @param {!Map<string, !CustomElementDefinition>} definitions
* @param {!Node|!HTMLElement|null} node
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not know much about Closure compiler's type system, but here's my attempt. This line of code causes warnings because Closures definition for Node doesn't have a tagName nor a is property.

Do you need me to add types to everything? Also do you need me to fix all type warnings? If so I would appreciate help on doing so

* @return {CustomElementDefinition|null}
*/
function getDefinition(definitions, node) {
const name = typeof node.is === 'string' ? node.is : node.tagName.toLowerCase();
const name = typeof node['is'] === 'string' ? node['is'] : node.localName;
const definition = definitions.get(name);
if (definition) {
return definition.localName === node.localName || definition.localName === node.is ? definition : null;
return definition.localName === node.localName || definition.localName === node['is'] ? definition : null;
} else {
return null;
}