[Custom Elements] Import module

[ParkFramework]

It will be very useful to describe the import attribute in custom element.

Example: index.html

<custom-button import="MyClassButton from 'buttons.html'"></custom-button>

Example: buttons.html

<style>
...
</style>
<script>
export class MyClassButton extends HTMLButtonElement
{
   // Synchronous constructor and other API
}
</script>

User agent, automatically loading file and register element.

[rniwa]

I think more natural way of doing that will be something like:

<script type="module" src="my-component.js" import="my-button as custom-button">
...
<custom-button>...</custom-button>
<custom-button>...</custom-button>
...

[ParkFramework]

@rniwa Your offer, there is no import CSS styles, file buttons.html It contains styles and js script.

[rniwa]

You can import CSS via @import in your custom element's shadow tree. Since styles are scoped at a shadow boundary, you'd need to include a style element inside your shadow tree anyway.

[ParkFramework]

Yes, this is to HTML code buttons.html, instead of the JS my-component.js :)

[dglazkov]

BTW, there are pretty serious issues with using @import in Shadow DOM, uncovered by Polymer folks and diagnosed by @tabaktins/@esprehn. For more details, see: https://lists.w3.org/Archives/Public/www-style/2014Aug/0238.html.

[dglazkov]

@tabatkins for realz now.

[rniwa]

LOL, it's uncanny that I pointed out style sharing as an issue multiple times in the past, and you guys told me @import (and cache headers) is the solution. It was also one of the reasons we wanted to do CSS-based tree scoping.

But now that we're all here, it would be great to tackle this problem.

[annevk]

This is a duplicate of #136. @dglazkov I recommend filing a distinct issue for @import if you had not done so yet.