svg filter on regular tag

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
    color: #fff; background: #666;
    font-family: serif; font-size: 30px;
    font-weight: bold;
}

p {
  	color: #000;
    -webkit-filter: url(#my-drop-shadow);
    filter: url(#my-drop-shadow);
    padding: 10px;
    border: 1px solid #fff;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>

<filter id="my-drop-shadow" x="0" y="0" width="200%" height="200%">

    <feColorMatrix type="matrix" values=
                "0 0 0 0   1
                 0 0 0 0   1
                 0 0 0 0   1
                 0 0 0 1   0" in="SourceGraphic" result="coloredOut" />
    <feMorphology operator="dilate" radius="2" in="coloredOut" result="dilatedOut" />
    <feGaussianBlur stdDeviation="2" in="dilatedOut" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
</defs>
</svg>

<p>Hello there.</p>
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}