How to register Google AMP on Mavo, to be editable?

[GalinhaLX]

hi

Google AMP offers a lot of interesting WebComponents

I wonder if someone have already used them with Mavo?

I tried to 'connect' them with Mavo, based on @DmitrySharabin codepen, and on DOM elements list i found here

with something like

(function() {
	Mavo.Elements.register({
		"amp-img": {
			extend: "HTMLImageElement",
			selector: "amp-img",
			init: () => {}
		}
	});
})();

with no success :(

Does it need to listen to some change events to be able to edit it? (I can't find information about it on AMP website)

[DmitrySharabin]

I would suggest trying the experimental mv-edit-as attribute Lea added recently. See her pen as an example: https://codepen.io/leaverou/pen/eYMLovG.

In your case, mv-edit-as="media" should work.

But please keep in mind that if the web component you are using has API different from the standard img element, that won't work.

Anyway, this is an excellent opportunity to test drive the new Mavo feature. 😉

[GalinhaLX]

Hi @DmitrySharabin

Thanks for your answer

When you use "media" , is it referenced to elements registered in Mavo here https://github.com/mavoweb/mavo/blob/master/src/elements.js ?

So other elements should be like, "meter","details" ..etc?

Or is this a reference to something else, and if so, where can I find a list of it?

[DmitrySharabin]

When you use "media" , is it referenced to elements registered in Mavo here https://github.com/mavoweb/mavo/blob/master/src/elements.js ?
So other elements should be like, "meter","details" ..etc?

Exactly! We should specify an element type from Mavo's registry.