Custom styling won't take effect

[diregraph]

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../vaadin-valo-theme/vaadin-split-layout.html">
<link rel="import" href="../vaadin-split-layout/vaadin-split-layout.html">

<dom-module id="vaadin-split-layout-demo">
  <template>
      <custom-style>
          <style is="custom-style">
              .my-split-layout {
                  --vaadin-split-layout-splitter: {
                      min-width: 6px;
                      min-height: 4px;
                      background: #1676f4;
                  };
              }
          </style>
    </custom-style>
    <vaadin-split-layout class="my-split-layout">
        <div>First content element</div>
        <div>Second content element</div>
    </vaadin-split-layout>
  </template>

  <script>
    /**
     * `vaadin-split-layout-demo`
     * a custom split-layout using vaadin-split-layout
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class VaadinSplitLayoutDemo extends Polymer.Element {
        static get is() { return 'vaadin-split-layout-demo'; }
    }

    window.customElements.define(VaadinSplitLayoutDemo .is, VaadinSplitLayoutDemo );
  </script>
</dom-module>

Unfortunately this does not work and HTML API documentation does not help much too. I also referred to the some of the previous issues which I could not use to help in my case. Any enlightenment is highly appreciated. Thank you and Cheers.

[jouni]

Hi! We are no longer using CSS mixins. See vaadin/vaadin-grid#1132 (comment) for more info, and https://github.com/vaadin/vaadin-themable-mixin/wiki for documentation how to use the internal stylable parts.

The documentation is still under development, and will eventually be found from vaadin.com and linked from the element API docs.

[diregraph]

Thank you @jouni ! This seems promising. 👍

[diregraph]

Before this comment was made, I used the following file vaadin-valo-theme/vaadin-split-layout.html to customize the vaadin-split-layout. Since it is said that the vaadin-themable-mixin is proprietary I have the following question, "Is it not possible for a user of Vaadin Elements to use vaadin-themable-mixin to customize a Vaadin Element?"

[jouni]

By “proprietary” I mean that the solution was introduced by us, more or less, and it’s not yet largely used outside of Vaadin.

All of it is open source, and we actually encourage the community to use ThemableMixin, and the idea about stylable parts behind it, to make their elements easily stylable as well.

Not sure if I understood your question properly. 😄

[diregraph]

You answered the questions I had in my mind. 😄 Thank you @jouni. I used ThemableMixin as well in my project.