ShadyCSS CustomStyleInterface element

[asyncLiz]

We all know and love <custom-style>, but it comes with some extra cost due to the "include" feature of Polymer style modules.

It'd be great to have a tiny decoupled element that would register child styles with ShadyCSS for browsers that require the ShadyCSS polyfill.

Example:

<shady-style>
  <style>
    html {
      --custom-prop-on-ie11: teal;
    }
  </style>
</shady-style>

This was proposed on the Polymer slack by justin, daKmoR, and bennyp.

[daKmoR]

good idea... and it should be super simple 💪
that was my "POC" for it 🤣

    class CustomCss extends HTMLElement {
      constructor() {
        super();
        if (!window.ShadyCSS.CustomStyleInterface) {
          throw new Error('You have to load CustomStyleInterface via "import \'@webcomponents/shadycss/custom-style-interface.min.js\';"');
        }
        window.ShadyCSS.CustomStyleInterface.addCustomStyle(this);
      }
      connectedCallback() {
        this.__styleNode = document.createElement('style');
        this.__styleNode.textContent = this.css;
        document.body.appendChild(this.__styleNode);
      }
      getStyle() {
        return this.__styleNode;
      }
    }
    if (!customElements.get('custom-css')) {
      window.customElements.define('custom-css', CustomCss);
    }

// usage
      <custom-css .css=${css`
        pre {
          border: 1px dotted grey;
          padding: 20px;
          margin: 20px;
        }
      `}></custom-css>

[asyncLiz]

What would be the benefit of using a property instead of markup? With a property, it becomes more difficult to set the CSS outside of frameworks like lit-html.

[stramel]

I definitely prefer the semantic markup approach. I don't think it would be hard to support both approaches though without adding much overhead.

[stramel]

@daKmoR I modified your PoC to support semantic markup and the CSS property.

What do you guys think? https://gist.github.com/stramel/536cd51402f47519a248d7433355ae72

/cc @asyncLiz

[daKmoR]

@stramel looks like a good starting point... 🤗

I only used properties as it was less error-prone.. e.g. sometimes your child is not yet there when you init... and that problem just does not exist if you use a property.

also iirc you will either need to conditionally create the style tag or put the original content in a template (which you need to polyfill for IE) ... as if you not it will be there double.

but all in all I'm saying yes let's move forward with this... but we need tests and demos to be sure it works... especially in those nasty edge cases

[admwx7]

@stramel created a repo for this https://github.com/CommunityElements/shady-style