Re: [webcomponents] Styling of elements where attachShadow(...) not allowed (#376)

I agree, mentioned proposal is great, but this issue is specifically about internal styling of element, possibility to extend native element and give it different, let's say, default styling.

Here is an example:
![2016-02-02 13-40-47](https://cloud.githubusercontent.com/assets/928965/12749700/9aea78ee-c9b2-11e5-8b75-82a355d8c3ab.png)
And source code for this part, where first half are extended elements with multiple improvements and default styling, while second half are raw native elements as they are (Chromium):
```html
<button icon="home" is="cs-button" type="button">Button</button>
<input is="cs-input-text" type="text">
<input disabled is="cs-input-text" type="text">
<button force-fullsize icon="home" is="cs-button" type="button"></button>
<cs-icon icon="home"></cs-icon>
<textarea is="cs-textarea"></textarea>
<nav is="cs-nav-tabs">
 <button is="cs-button" type="button">One</button>
 <button is="cs-button" type="button">Two</button>
</nav>
<section is="cs-section-switcher">
 <article>One</article>
 <article>Two</article>
</section>
<label is="cs-label-switcher">
 <input checked type="radio" value="0"> Zero
</label>
<label is="cs-label-switcher">
 <input checked type="radio" value="1"> One
</label>
<nav is="cs-nav-pagination" page="1" pages="20"></nav>
<progress is="cs-progress" value="20"></progress>
<br>
<br>
<button icon="home" type="button">Button</button>
<input type="text">
<input disabled type="text">
<button force-fullsize icon="home" type="button"></button>
<cs-icon></cs-icon>
<textarea></textarea>
<nav>
 <button type="button">One</button>
 <button type="button">Two</button>
</nav>
<section>
 <article>One</article>
 <article>Two</article>
</section>
<label>
 <input checked type="radio" value="0"> Zero
</label>
<label>
 <input checked type="radio" value="1"> One
</label>
<nav page="1" pages="20"></nav>
<progress value="20"></progress>
```

As you can see, it is very convenient to be able to greatly improve native element with `[is]` while preserving its semantics and accessibility features. I'm trying to always extend native elements in contrast to [Polymer](https://github.com/Polymer/polymer) team, they try to re-implement all the elements from scratch

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/376#issuecomment-178555897

Received on Tuesday, 2 February 2016 12:48:10 UTC