inline-styles.js

import { StyleSheet, css } from 'aphrodite';
import { innerHTML } from 'diffhtml';

const styles = StyleSheet.create({
  red: {
    backgroundColor: 'red'
  },

  blue: {
    backgroundColor: 'blue'
  },

  hover: {
    ':hover': {
        backgroundColor: 'red'
    }
  },

  small: {
    '@media (max-width: 600px)': {
      backgroundColor: 'red',
    }
  }
});

class App extends HTMLElement {
  attachedCallback() {
    this.render();
  }

  render() {
    innerHTML(this, `
      <div>
        <span class="${css(styles.red)}">
            This is red.
        </span>
        <span class="${css(styles.hover)}">
            This turns red on hover.
        </span>
        <span class="${css(styles.small)}">
            This turns red when the browser is less than 600px width.
        </span>
        <span class="${css(styles.red, styles.blue)}">
            This is blue.
        </span>
        <span class="${css(styles.blue, styles.small)}">
            This is blue and turns red when the browser is less than
            600px width.
        </span>
      </div>
    `);
  }
}

document.registerElement('my-app', App);