Re: [w3c/webcomponents] The is="" attribute is confusing? Maybe we should encourage only ES6 class-based extension. (#509)

For those that want progressive enhancement (which so far is the only argument for keeping `is=""`), why not just

```html
<web-map>...</web-map>
<noscript><map>...</map></noscript>
```

? That seems to achieve the same thing. A downside is that HTML has to be duplicated, but that is no problem when using a template engine to dynamically insert identical content.

Or, here's another way:

```html
<web-map></web-map>
<noscript><map>...</map></noscript>
<script>
  var map = document.querySelector('noscript > map')
  var webMap = document.querySelector('web-map')
  webMap.innerHTML = map.innerHTML
  // copy attributes too if needed
</script>
```

or

```html
<div id="map-container">
  <map id="map">...</map>
  <script>
    // If javascript is enabled
    var webMap = document.createElement('web-map')
    webMap.innerHTML = window['map'].innerHTML
    window['map'].remove()
    window['map-container'].appendChild(webMap)
  </script>
</div>
```

Is there something we can achieve with `is=""` that we can't achieve with tricks like above besides avoiding duplicate HTML?

It might be better to use these slightly-more-verbose methods (they work!), and wait until `is=""` can be [cleaned up](https://github.com/w3c/webcomponents/issues/509#issuecomment-266065705).

I see how `is=""` is useful for progressive enhancement, but currently the API isn't clean when disregarding PE. We should be able to achieve non-PE things with `<autonomous-elements>` using JavaScript inheritance without the `{extends:}` argument. After inheritance is cleaned up and JS-centric, `is=""` can be added as a convenient way to achieve the PE examples above.

-- 
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/509#issuecomment-266318444