Custom styles

[lastmjs]

I would like to be able to set styles on the editor, but I'm having a hard time doing it. Could this component possibly provide some custom CSS properties for styling?

[tomalec]

What kind of properties would you like to have? Given, it's a wrapper for the Ace editor https://ace.c9.io/, and there are plenty of things to style.

Custom Pseudo Elements would be great here, but they are just not there yet.

[lastmjs]

Is there any way to just apply arbitrary styles that the consumer of the element defines? Polymer uses CSS variables somehow to do this. Specifically I want to be able to do the following declaratively:

setTimeout(() => { //TODO fix this...it would be nice to be able to set the font-size officially through the ace editor web component, and then we wouldn't have to hack. The timeout is to ensure the current task on the event loop completes and the dom template is stamped because of the loaded property before accessing the dom
            this.shadowRoot.querySelector('#codeEditor').shadowRoot.querySelector('#juicy-ace-editor-container').style = 'font-size: calc(40px - 1vw)';
            this.shadowRoot.querySelector('#codeEditor').shadowRoot.querySelector('.ace_gutter').style = 'background: #2a9af2';
        }, 2000);

I have to imperatively drill into the shadow root of the editor to set the styles that I want.

[tomalec]

Polymer uses CSS Custom Properties (Variables) - speced and widely supported, and CSS Mixins - not a standard yet (unfortunately).

Mixins and @apply so far are polymer specific thing https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-custom-css-mixins

And we would like to keep juicy-ace-editor vanilla and reduce the number of dependencies (as Ace itself is heavy enough)

Luckily it seems apply-shim/prolyfill is separated from Polymer. But I'm not sure how it will work with Vanilla components, Polymer tends to lack support for things that are not Polymer top to bottom.

---

For sure I can expose you few, specific custom properties, just give me the list of elements and properties you need. So, at least until we will find something better with @apply or ::part, you can move forward.

• #juicy-ace-editor-container: font-size
• .ace_gutter: background
• ...?

[tomalec]

Alternatively, you should be able to solve that by providing a custom Ace theme.
Now, I start to think it could be a better idea. The element itself loads themes to the same shadow DOM, so you are able to style them easily without a need for Custom Property, CSS Mixin, crossing Shadow DOM boundary.

If custom themes are not enough for you, I've created a branch with a proposal of a new attribute to declaratively inject custom styles. Please review and tell me if that's what you need.
https://github.com/Juicy/juicy-ace-editor/tree/issues/28-custom-styles
https://github.com/Juicy/juicy-ace-editor/compare/issues/28-custom-styles?expand=1

[lastmjs]

The custom styles seems like exactly what I'm looking for, testing it out now

[lastmjs]

There are some issues:

We can't do document.querySelector here because the style you're looking for might be inside of a shadow root: https://github.com/Juicy/juicy-ace-editor/blob/issues/28-custom-styles/juicy-ace-editor.html#L181

I'm not sure how to get around that easily, but why not just pass in the style as light dom to the juicy-ace-editor element? In my case it would look like this:

<juicy-ace-editor>
  <style id="ace-style">
    #juicy-ace-editor-container {
       font-size: calc(40px - 1vw);
    }

    .ace_gutter {
      background: #2a9af2;
    }
  </style>
</juicy-ace-editor>

[tomalec]

We can't do document.querySelector here because the style you're looking for might be inside of a shadow root: /28-custom-styles/juicy-ace-editor.html@issues#L181

Great catch.

What about

var n = this.getRootNode().querySelector(themeId);

?

It will look up in the (shadow) tree the juicy-ace-editor is in.