Re: [w3c/webcomponents] HTML Modules (#645)

Is webcomponents works only for Javascript？ if without Javascript，I only want to create an contact card with avatar as components, but  without javascript skill：

I likes javascript only do something as javascript do, It‘s a promote for web development, not the only way, web needs be can works without any `script` tag. 

```html

<!-- contact-card/contact-card.html -->

<element name="contact-card">
    <template>
        <style>
            :host { }
            :host(sizing="cover") { }
            :host(sizing="contain") { }
        </style>
        <img src="${avatar}" />
    </template>
</element>

<!-- index.html -->
<link rel="import" href="contact-card/contact-card.html" />

<contact-card sizing="cover" avatar="avatar.png"></contact-card>
<contact-card sizing="contain" avatar="avatar.png"></contact-card>

```

in javascript, we has fetch api already, I think allow javascript import html file will likes this:

```javascript

import  * as myModule from "my-module";
import doc from '/foo.html' as ??;

/* how to import ClassA from foo.html? */
import {ClassA} from '/foo.html' as ???;
 /* 
Is foo.html a Document or DocumentFragment?
import ClassA from document or fragment ?
*/

/* and could we import a stylesheet from foo.html? */
import {style1, style2} from '/foo.html' as ???;
/* 
    <link rel="stylesheet" export="style1"/>?
    or 
    <export name="style1">
        <link rel="stylesheet" export="style1"/>?
    </export>
*/

/* if we had more than one template in foo.html */
//....
```

imported html may contains many things such as templates, styles, scripts. the best way to access them also by javascript api, not only syntax support.

such as an component

```html

<template>
    <style>
    </style>
    <h1>Content</h1>
</template>

<script>
    class TheComponent1 { }
    class TheComponent2 { }

    export TheComponent1;
    export TheComponent2;
</script>

```

The better way will be template move to `filename.html` script move to `filename.js`. or some one likes this:
```javascript

import {TheComponent1 as Component1,  TheComponent2 as Component2} from 'template.html' as DocumentFragment;

// or

import doc from 'template.html' as DocumentFragment;

let Component1 = doc.TheComponent1;
let Component2 = doc.TheComponent2;

```

So I think html import is better than esmodule for webcomponents now.

```html
<link rel="import" href="custom-element.html"/>
```

 don't forget in javascript, we have the `fetch` api, there just needs a `__dirname` or keep current file path for any esmodule to load some static content.

```javascript
import {Element} from '@polymer/path/to/polymer-element'

class CustomElement extends Element {

}

export default CustomElement;

fetch('template.html', myInit).then(function (res) {
    return response.text();
}).then(function (text) {
   someTemplateHolder.add('custom-element', text);
    customElements.define('custom-element', CustomElement);
}).catch(function(error) {
    console.log(error);
});

// 0r 

customElements.define('custom-element', CustomElement, {
    template: 'template.html'
});

// Or just a decorate

@template('template.html')
class CustomElement extends Element { }
customElements.define('custom-element', CustomElement);

// Or

class CustomElement extends Element { 
    static get template() {
        return 'template.html';
    }
}

```

There a lot way to do in javascript.  so, `import` a html file in javascript is not required. Javascript can do this already. But the important is `HTMLImport` works without javascript.

-- 
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/645#issuecomment-325246294