Riot.js 2.2 Bug Report Template
HTML
<script src="https://cdn.jsdelivr.net/riot/3/riot+compiler.min.js"></script>
<my-tag></my-tag>
<script>
var app;
</script>
<script type="riot/tag">
<my-tag-child>
<div onclick="{addAnother}">Add item</div>
<my-tag-child-container if={false}/>
addAnother(){
app.addAnotherPopup(
{text: 'An item'}
);
app.update();
}
</my-tag-child>
</script>
<script type="riot/tag">
<my-tag-child-container>
<my-tag-child/>
</my-tag-child-container>
</script>
<script type="riot/tag">
<my-tag>
<my-tag-child-container fromroot="true"/>
<div class="fixedFullSize popupsHolder" if="{popups.length}">
<div class="singlePopupGlassAndPopupHolder" each="{popups}">
<div class="popupGlass"></div>
<div class="inputPopupHolder">
<div class="inputPopup">
HELLO!!!!
</div>
</div>
</div>
</div>
app = this;
app.popups = [];
addAnotherPopup(item){
app.popups.push(item);
}
</my-tag>
</script>
CSS
body {
font-family: sans-serif;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fixedFullSize{
left: 0;
top: 0;
position:fixed;
width: 100%;
height: 100%;
}
.popupsHolder{
z-index: 100;
}
.singlePopupGlassAndPopupHolder{
position:absolute;
width: 100%;
height: 100%;
diplay:flex;
align-items: center;
justify-content: center;
}
.popupGlass{
position:fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
animation-name: fadeIn;
animation-duration: 1580ms;
}
.inputPopupHolder {
position: absolute;
display:flex;
align-items: center;
justify-content: center;
left:20px;
right:20px;
top:30px;
bottom:30px;
}
.inputPopup {
background:rgb(209,209,209);
display: flex;
flex-direction: column;
align-items: center;
width:100%;
height:100%;
padding:10px;
}
JavaScript
riot.mount('*')