Add support for web-components

This is all @michael-klein’s initiative 😄to add support for web-components with a parametrized target for styled.

@michael-klein feel free to add more details. I’ve created this, to just put it on the roadmap 💯

[michael-klein]

Hey there 😃

So, for web-components, a single global style sheet obviously doesn’t work, due to shadow DOM. Therefore, goober would need a mechanism to render to different targets (like the shadowRoot of a web component).

I played with a few ways to implement this and my current favorite is to do it by means of a function binding on styled (which would pass the target to the functions that need it). This change would also incorporate setting the pragma this way and do away with setPragma (htm is the inspiration for this idea).

Basically, users would bind like this to change the target and/or pragam:

styled = styled.bind({
     h: somePragma,
     target: this.shadowRoot // in case of a web-component
})

I have this change already implemented in a branch and it actually shaves off some bytes from the bundle size. The implementation is mostly in styled.js:

export const styled = function(tag) {
  let context = this || {};
  const h = context.h;
  let target = context.target || (document && document.head);
  return (str, ...defs) => props => {
    const className = getClassNameForCss(getCss(str, defs, props), target);

    // To be used for 'vanilla'
    if (!h || !tag) return className;

    return h(
      tag,
      Object.assign({}, props, {
        className:
          (props && props.className ? props.className + " " : "") + className
      })
    );
  };
};

and sheet.js

export const add = (hash, css, target) => {
  // If this is already present just stop
  if (styles[hash] == css) {
    return;
  }

  // Keep the hash and the value in _cache_
  styles[hash] = css;

  // If we're no the client
  if (target) {
    let sheet = target.querySelector("style[" + SHEET_ID + "]");
    if (!sheet) {
      sheet = document.createElement("style");
      sheet.setAttribute(SHEET_ID, "");
      target.appendChild(sheet);
    }

    if (!sheet.firstChild) {
      sheet.appendChild(document.createTextNode(""));
    }

    // Append the css into the style sheet
    sheet.firstChild.data += css;
  }
};

[geocine]

@michael-klein is there a documentation on how to use this? Specifically using the vanilla css