support for built in components

[carlos-verdes]

I think lot of components can be rewritten using built-in approach and this will remove the "flash style" effect as you can style them with plain css directly, doing progressive enhancement just on behavior.

The simples example is button, today we have something like this:

<wa-button>Button</wa-button>tt

When this is rendered the browser just render text "Button" until the logic of the web component is executed (and it will not work without javascript).

If instead of this we change into:

<button is="wa-button>Button</wa-button>

Then the browser will render a button instead of text which is a much better starting point than before.

Also because is a button we can apply css like this:

button[is="button"] {
   @extend .button
}

This will display the button as expected without flashing style!

We can apply the same for more complex components like Card using something like:

<article is="wa-card">
  <header>...</header>
  some content
  <footer>...</footer>
</article>

I hope this inspire some of you!!

[KonnorRogers]

is="" is a dead end. WebKit / Safari has come right out and said they will never support it.

WebKit/standards-positions#97

On top of this, not all elements support shadow roots. Notably, <input>, <a> and <button> do not support attaching a shadow dom which is heavily relied upon by Web Awesome custom elements.

[carlos-verdes]

First of all I really appreciate the time to answer this.

I didn't know this was dropped by Webkit / Safari, thanks for the heads up (that's why I wrote this issue to understand why nobody were using this approach).

About the shadow DOM, I'm against that on some cases so for me that was not an issue but I understand your point.
Then the missing part is how browsers can improve the flash of style, they should have like a local registry where they cache how to render things like aw-button