Webcomponent custom styles example

index.jsx

/** @jsx h */
/*
  Component A passing custom styles to sk-tags
 */

import { Component, h } from 'skatejs';

class A extends Component {
  renderCallback() {
    const tagStyles = `
      .tag {
        background-color: red;
      }
      .wrapper { 
        border: 1px solid black;
      }
    `;
    
    return <sk-tags styles={tagStyles} />
  }
}

You don't need the wrapping <div /> and you should self-close <sk-tags />.

Unless you're doing dynamic styles in your style() function based on props, I would put the call to styles() outside of renderCallback(). It's probably a micro-optimisation here, but it would show best-practices (and that can be noted, if you want).

Do you think using skatepark-core here detracts from the approachability of the examples? You could just pass a string for the sake of simplicity.

@treshugart updated, I removed the skatepark-core just to not confuse people. Do you think that the gist makes sense now or is just too simple and doesn't add value to the article? Maybe we can just get rid of it.