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

@tomalec @WebReflection 

For things like 

> ```html
> <table>
>  <my-tr>
> ```

Can you just [use CSS to style `my-tr` elements the same as the browser's default styling for `tr` elements](http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css)?


> ```html
<my-template>
   <div>This should be unavailable for `querySelector`, CSS and rendering
> ```

This is not a solution to be solved with `is=""`. Browsers should be cleaned up, and anything that extends from `HTMLTemplateElement` should behave as a `<template>` element does. Anything that extends from `HTMLTableRowElement` should behave as such. Etc. If you're targeting very old browsers (but why?), then my vanilla examples above already provide insight into how to make that possible. For example,

```html
<div id="container">
<table>
 <tr></tr>
</table>
<div>
<script>
 var c = document.querySelector('#container')
 c.innerHTML = c.innerHTML.replace('<table', '<my-table').replace('<tr', '<my-tr')
 // it works in modern browsers, in old browsers, and in browsers with JS disabled.
</script>
```

It is a little more verbose, but it doesn't rely on a not-yet-solid API. It is also possible to make shortcut APIs for the previous types of example (i.e. you could polyfill `is=""` yourself as a shortcut, without relying on the browser shipping a unclean API). For example, when JavaScript is available:


```html
<div id="container">
<table>
 <tr></tr>
</table>
<div>
<script>
 is('#container', {
  table: 'my-table',
  tr: 'my-tr',
 })
</script>
```

I'd also like to state again that modern browsers should use something similar to `instanceof HTMLInputElement`, etc, to make sure autonomous custom elements behave as expected.

-- 
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-266322918