[Experiment] Explore using the object tag

[ajithranka]

Let's check if we can use the <object> tag to embed changeset-map as a HTML sub-document.

• This will help us clean up our CSS and remove the name spacing. We might even be able to use a real CSS library.
• Instead of passing parent width and height as params into changeset-map, this can be made the responsibility of the user to set on the object tag.
• Passing events back and forth between parent and child documents might get tricky.

@kepta, @batpad Let me know if I'm understanding this wrong. 🙇

[kepta]

@ajithranka nice idea. I would also like to add another option. shadow-dom. The mdn page has to say this.

Why would you want to keep some code separate from the rest of the page? One reason is that on a large site, for example, if the CSS is not carefully organized, the styling for the navigation can "leak" into the main content area where it was not intended to go, or vice-versa. As a site or an app scales, this kind of thing becomes difficult to avoid.

Open to discussion about what could work.

[batpad]

@ajithranka I don't like the idea of <object>. This could be due to bad flashbacks of using it to embed flash, but I just don't think it's what we want in this case.

What we want for the encapsulation is really Shadow DOM, though I'm not sure what browser support looks like - this links to an idea of being able to have encapsulated components with their own css, etc. - essentially allowing users to define custom components similar to how the browser internally represents and renders certain components like widgets, etc. (they have an internal DOM structure, but that is never exposed, hence "shadow DOM"). This conceptually seems to me to be the cleanest, but last I checked, browser support did not really exist.

I think the other option would still be to use an <iframe> and use cross-document messaging to communicate events between the parent and the iframe: http://stackoverflow.com/a/9154267 . This, in my mind, could work, but not having used this technique before, I am not sure if and what limitations might be and if there are any implementation quirks.

[ajithranka]

+@rasagy

This will feed into our work in making OSMCHA responsive.

Do you think it might be easier to continue using custom, namespaced css for making changeset-map mobile friendly or do we need a library like assembly?

Not important right now, we can wait on it until we understand this better.

[rasagy]

If the focus is on just making the changeset-map responsive, then we don’t really need a css framework — Changeset map is pretty small and the responsive layout css can be hand-crafted (like the rest of the css).

If there’s a larger goal of making Changeset Map very customizable by the parent, then we’ll have to relook at the current css as well.

Happy to take a shot at writing custom media queries when we start working on the OSMCha responsive layout.

cc @ajithranka @kepta @batpad