title: In Riot JS, opts values don't render inside HTML tag unless there's a static character(s) with it
body: <p>I have a simple Riot tag, and I noticed I was getting some HTML tags that were rendering empty, when other HTML tags that contain the same property from <code>opts</code> render the value just fine.</p>
  
  <pre><code>&lt;sample&gt;
    &lt;p&gt;Full name: { opts.full_name }&lt;/p&gt; // &lt;--works
    &lt;p&gt;{ opts.full_name }&lt;/p&gt; // &lt;-- renders empty &lt;p&gt;&lt;/p&gt;
  &lt;/sample&gt;
  </code></pre>
  
  <p>If I add just a single empty space in the HTML tag with the <code>opts</code> property, then it works: </p>
  
  <pre><code>&lt;sample&gt;
    &lt;p&gt;{ opts.full_name } &lt;/p&gt; // &lt;-- Add a space, and it works
  &lt;/sample&gt;
  </code></pre>
  
  <p>This appears to only be occurring with <code>opts</code>, because when I set a local property as the only contents of an HTML tag, it works:</p>
  
  <pre><code>&lt;sample&gt;
    &lt;p&gt;{ foo }&lt;/p&gt;
    this.foo = "bar"
  &lt;/sample&gt;
  </code></pre>
  
  <p>And so does this when I assign a local property to the value of an <code>opts</code> one:</p>
  
  <pre><code>&lt;sample&gt;
    &lt;p&gt;{ full_name }&lt;/p&gt;
    this.full_name = opts.full_name
  &lt;/sample&gt;
  </code></pre>
  
  <p>I should add that I'm doing this in a Chrome Extension using the <code>riot.csp.js</code> with the content script.</p>
  
  <p>Here is my manifest <code>content_scripts</code> rule:</p>
  
  <pre><code>"content_scripts": [
      {
        "matches": ["*://*/*"],
        "css": ["content.css"],
        "js": ["libs/jquery.js", "libs/underscore.js", "libs/riot.csp.js", "build/tags.js", "content.js"]
      }
  </code></pre>
  
  <p>The pre-compiled tag file:</p>
  
  <pre><code>&lt;sample&gt;
    &lt;p&gt;Full name: { opts.full_name }&lt;/p&gt;
    &lt;p&gt;{ opts.full_name }&lt;/p&gt;
    &lt;p&gt;This is the data: { JSON.stringify(opts, null, 2) }&lt;/p&gt;
    &lt;p&gt;{ foo }&lt;/p&gt;
    this.foo = "bar"
  &lt;/sample&gt;
  </code></pre>
  
  <p>The <code>tags.js</code> file (compiled):</p>
  
  <pre><code>riot.tag2('sample', '&lt;p&gt;Full name: {opts.full_name}&lt;/p&gt; &lt;p&gt;{opts.full_name}&lt;/p&gt; &lt;p&gt;This is the data: {JSON.stringify(opts, null, 2)}&lt;/p&gt; &lt;p&gt;{foo}&lt;/p&gt;', '', '', function(opts) {
    this.foo = "bar"
  });
  </code></pre>
  
  <p>The <code>content.js</code>:</p>
  
  <pre><code>$("body).append("&lt;sample&gt;&lt;/sample&gt;");
  riot.mount('*', data);
  </code></pre>
  
  <p>The data object being passed:</p>
  
  <pre><code>{ "full_name" : "Homer Simpson" }
  </code></pre>
  
  <p>Altogether, my HTML renders out:</p>
  
  <pre><code>&lt;sample&gt;
    &lt;p&gt;Full name: Homer Simpson&lt;/p&gt;
    &lt;p&gt;&lt;/p&gt; &lt;-- troublesome bit: why is this empty?
    &lt;p&gt;This is the data: {
      "full_name": "Homer Simpson"
    }&lt;/p&gt;
    &lt;p&gt;bar&lt;/p&gt;
  &lt;/sample&gt;
  </code></pre>
  
  <p>Although I have the above-mentioned workarounds, it's not idea. What is going on?</p>