<random-color>

application.template.hbs

<random-color fill={{true}}>So</random-color>
<random-color glow={{true}}>many</random-color>
<random-color fill={{true}} glow={{true}}>colors</random-color>!!!

random-color.component.js

import Ember from 'ember';

// Returns a random integer from 0 up to (and excluding) max
function randomInteger(max) {
  return Math.floor( Math.random() * max );
}

// Returns a random color in rgb(x,y,z) format
function randomColor() {
  let r = randomInteger(256),
      g = randomInteger(256),
      b = randomInteger(256);

  return `rgb(${r},${g},${b})`;
}

// Returns a text-shadow for the "glow" effect
function randomGlow() {
  return `0px 0px 4px ${ randomColor() }`;
}

export default Ember.GlimmerComponent.extend({

  setColor() {
    if (this.attrs.fill) {
      this.element.style.color = randomColor();
    }

    if (this.attrs.glow) {
      this.element.style.textShadow = randomGlow();
    }
  },

  didInsertElement() {
    this.setColor();
  },

  click() {
    this.setColor();
  }

});

random-color.template.hbs

<span>{{yield}}</span>

styles.app.css

body {
  margin: 12px 16px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 20pt;
  letter-spacing: 2px;
}

::moz-selection { background-color: transparent; }
::selection { background-color: transparent; }

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "hax": "https://cdn.rawgit.com/chancancode/5b7b95b6268d51cdcaae/raw/92e0654083305c73cd601381a6cea705be9f8890/hax.js",
    "ember": "http://builds.emberjs.com/canary/ember.debug.js",
    "ember-template-compiler": "http://builds.emberjs.com/canary/ember-template-compiler.js"
  }
}