Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Enable native Custom Elements v1 #25173

Merged
merged 4 commits into from
Oct 23, 2019
Merged

✨ Enable native Custom Elements v1 #25173

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6540f55
Try enabling native Custom Elements v1
jridgewell Oct 21, 2019
0e9cf82
Fix img tests
jridgewell Oct 22, 2019
214ad70
Bump travis
jridgewell Oct 22, 2019
10146fb
Define NATIVE_CUSTOM_ELEMENTS_V1 RTV Experiemnt
jridgewell Oct 23, 2019
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
4 changes: 3 additions & 1 deletion src/friendly-iframe-embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -855,7 +855,9 @@ export class FriendlyIframeEmbed {
function installPolyfillsInChildWindow(parentWin, childWin) {
installDocContains(childWin);
installDOMTokenList(childWin);
installCustomElements(childWin);
// The anonymous class parameter allows us to detect native classes vs
// transpiled classes.
installCustomElements(childWin, class {});
}

/**
Expand Down
4 changes: 3 additions & 1 deletion src/polyfills.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ if (self.document) {
installDOMTokenList(self);
installDocContains(self);
installGetBoundingClientRect(self);
installCustomElements(self);
// The anonymous class parameter allows us to detect native classes vs
// transpiled classes.
installCustomElements(self, class {});
}

// TODO(#18268, erwinm): For whatever reason imports to modules that have no
Expand Down
8 changes: 8 additions & 0 deletions test/unit/test-amp-img.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,8 @@ describe('amp-img', () => {
it('should propagate the object-fit attribute', () => {
return getImg({
src: '/examples/img/sample.jpg',
Copy link
Contributor

Choose a reason for hiding this comment

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

Were these test breaking due to this change (if so why?)?

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 think the native Custom Elements implementations are able to fire connectedCallback much quicker than the MutationObserver the polyfill uses.

width: 300,
height: 200,
'object-fit': 'cover',
}).then(ampImg => {
const img = ampImg.querySelector('img');
Expand All @@ -387,6 +389,8 @@ describe('amp-img', () => {
it('should not propagate the object-fit attribute if invalid', () => {
return getImg({
src: '/examples/img/sample.jpg',
width: 300,
height: 200,
'object-fit': 'foo 80%',
}).then(ampImg => {
const img = ampImg.querySelector('img');
Expand All @@ -397,6 +401,8 @@ describe('amp-img', () => {
it('should propagate the object-position attribute', () => {
return getImg({
src: '/examples/img/sample.jpg',
width: 300,
height: 200,
'object-position': '20% 80%',
}).then(ampImg => {
const img = ampImg.querySelector('img');
Expand All @@ -407,6 +413,8 @@ describe('amp-img', () => {
it('should not propagate the object-position attribute if invalid', () => {
return getImg({
src: '/examples/img/sample.jpg',
width: 300,
height: 200,
'object-position': 'url("example.com")',
}).then(ampImg => {
const img = ampImg.querySelector('img');
Expand Down
4 changes: 3 additions & 1 deletion testing/describes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -645,7 +645,9 @@ class RealWinFixture {
get: () => customElements,
});
} else {
installCustomElements(win);
// The anonymous class parameter allows us to detect native classes
// vs transpiled classes.
installCustomElements(win, class {});
}

// Intercept event listeners
Expand Down
4 changes: 3 additions & 1 deletion testing/iframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,9 @@ export function createIframePromise(opt_runtimeOff, opt_beforeLayoutCallback) {
).getSingleDoc();
installExtensionsService(iframe.contentWindow);
installRuntimeServices(iframe.contentWindow);
installCustomElements(iframe.contentWindow);
// The anonymous class parameter allows us to detect native classes vs
// transpiled classes.
installCustomElements(iframe.contentWindow, class {});
installAmpdocServices(ampdoc);
Services.resourcesForDoc(ampdoc).ampInitComplete();
// Act like no other elements were loaded by default.
Expand Down