Re: [w3c/webcomponents] Why do we really need hyphens? (#658)

@wiredearp XSLT is very heavyweight from what I've seen of it, realistically I'd rather just a minimal tool for choosing names e.g.:

```html
<import src="./my-web-component.???" as="my-component-name" />

<!-- my-component-name would be strictly scoped to this document not
     other documents (not even shadow roots) that way we can be certain
     that there's never any name collisions

     There'd probably be a `document.customElements.define` or something
     like that for scoping elements to a specific document in this idea
-->
<my-component-name>...</my-component-name>
```

With that sort've approach I don't see any reason you couldn't permit hyphen-less names as well (as long as they're document scoped):

```html
<import src="./my-progress-component.???" as="progress" />

<!--- The import would shadow the outer progress but only this document
      can actually observe that, before upgrading it'd probably just appear
      as a regular progress element
-->
<progress>My progress content</progress>
```

Of course this idea has the wider issue that there's no canonical way to distribute a Custom Element (given that WebKit doesn't want to implement `<link rel="import"...`) so that would need to be added for this to even make sense.

Maybe something like (yes this idea is basically just ES import/export in HTML instead):

```html
<template id="content">
    <link rel="stylesheet" href="./fizz-buzz.css">
    ...
</template>

<!-- Basically just `<script type="module"` except that it's obviously
     assigned extra meaning in the context of custom elements
-->
<script type="export">
    export default class MyElement extends HTMLElement {
        constructor() {
            super()
            // ... Clone template[id="content"].content etc here
        }
    }
</script>

<!-- And in another file -->
<import src="./my-element.html" as="foo" />

<foo></foo>
```

---

This would arguably be even nicer with the proposed [html modules](https://github.com/w3c/webcomponents/issues/645) from that issue e.g.:

```js
// component.js
import content from "./content.html" as DocumentFragment

// Given that Custom Elements *require* JavaScript to define them why
// not make that what's imported to register them:
export default class MyElement extends HTMLElement {
    constructor() {
        super()
        const shadowRoot = this.attachShadow({ mode: 'open' })
    }
}
```

```html
<import src="./component.js" as="my-component-name" />

// component.js would be `import`-ed then `document.customElements.define`
// would be called on the resulting module
```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/658#issuecomment-331052272