JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.4.4/riot+compiler.min.js"></script>
<some-form></some-form>

<div>
  <h1>issue:</h1> 
  <p>both <code>&lt;yield/&gt;s</code> work fine on initial mount, but the one nested in the riot tag does not update. i cannot isolate the cause of this behavior, nor find any way to make the child tag (<code>&lt;a-dropdown&gt;</code>) update the yielded content.</p>
  <p>why doesn't this cascade? can anyone make it cascade?</p>
</div>

<script type="riot/tag">

<some-form>
  <a-select>
    <li>zero</li>
    <li each="{item in opts.list || parent.list}">{item.text}</li>
  </a-select>
  
  this.on('mount', function () {
    // simulated ajax response
    this.update({ list: [{ text: 'one' }, { text: 'two' }, { text: 'three' }] });
  });
</some-form>

<a-select>
  <ul><yield/></ul>
  <hr>
  <a-dropdown list={parent.list}>
    <yield/>
  </a-dropdown>
</a-select>

<a-dropdown>
  <ul><yield/></ul>
</a-dropdown>

</script>

CSS

div {
  margin: 1em 2em;
  padding: .5em 1.5em;
  background: #ddd;
  border-radius: .5em;
}
div h1 { font-size: 1.5em; }

JavaScript

riot.mount('*');