search

riot / custom-elements

Simple API to create vanilla custom elements with riot
MIT License
35 stars 3 forks source link

<style> doesn't work #1

Closed karak closed 5 years ago

karak commented 5 years ago

Style section doesn't work because it is just inserted under shadow-root like bellow:

<body>
  <x-hello message="Good-bye!">
     #shadow-root
       <style>x-hello,[data-is="x-hello"]{ color: red; }</style>
       ...
  </x-hello>
</body>

Using :host rather than custom implementation would fix this.

APPEND: This issue happened when passing compiled riot.tag, not RAW call of define. For I suppose those use cases would be standard. ...Then, the compiler should have some CSS switch to support shadow DOM.

GianlucaGuarini commented 5 years ago

Fixed in the riot-compiler@3.5.3. Thanks for reporting it

karak commented 5 years ago

Thank you. Simple :host is OK, but complex selector is still wrong.

    :host {
      color: red;
    }
    .clicked {
      font-weight: bold;
    }

is compiled to:

:host { color: red; } x-hello .clicked, [data-is="x-hello"] .clicked{ font-weight: bold; }
karak commented 5 years ago

I think riot-compiler v3 cannot accept both of light and shadow DOMs without any switch as long as it always transforms CSS, although that switching would be easy by using ::shadow pseudo selector. And riot@4 work is much preferred, even if only for the custom elements.

GianlucaGuarini commented 5 years ago

I can add an option to avoid the scoped behavior. I will check it asap

GianlucaGuarini commented 5 years ago

The new riot-compiler@3.6 has an option to avoid prefixing the css:

const compiler = require('riot-compiler')

compiler.compile(sourceCode, {
  parserOptions: {
    style: {
      prefixCSS: false
    }
  }
}, filePath)