Aurelia Slot Name

Aurelia Slot Name 3,9/5 2061 votes

The reason for that is that Aurelia holds a list of slotNames for the observers and after 99 there is none. After 99 it will result in using the slot name undefined. This leads to an infinite loop by searching for a free slot name as the counter can be infinite incremented but will not find something else than undefined. GitHub Gist: instantly share code, notes, and snippets.

app.html
<template>
<requirefrom='./man-with-no-name'></require>
<requirefrom='./western-extra'></require>
<man-with-no-name>Sometimes the dead can be more useful than the living.</man-with-no-name>
<western-extra>
<h1slot='outfit'>dead man's shoes</h1>
<h2slot='weapon'>rifle</h2>
</western-extra>
</template>
app.js
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<metaname='viewport' content='width=device-width, initial-scale=1'>
</head>
<bodyaurelia-app>
<h1>Loading...</h1>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js'></script>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/config.js'></script>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js'></script>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/bundles/babel.js'></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
man-with-no-name.css
.ManWithNoName {
border: 1px solid lightslategray;
border-radius: 1rem;
display: block;
padding: 1rem;
margin-bottom: 1rem;
}
man-with-no-name.html
<templateclass='ManWithNoName'>
<requirefrom='man-with-no-name.css'></require>
<slot></slot>
</template>
man-with-no-name.js

Using The “layouts” Feature In Aurelia – Charlie's (hopefully ...

western-extra.css
Aurelia
.WesternExtra {
border: 1px solid lightslategray;
border-radius: 1rem;
display: block;
overflow: hidden;
margin-bottom: 1rem;
}
.WesternExtra-outfit {
background-color: darkgoldenrod;
border-bottom: 1px solid lightslategray;
color: white;
padding: 1rem;
}
.WesternExtra-weapon {
background-color: lightsteelblue;
padding: 1rem;
}
western-extra.html

Cached

<templateclass='WesternExtra'>
<requirefrom='western-extra.css'></require>
<headerclass='WesternExtra-outfit'>
<slotname='outfit'></slot>
</header>
<sectionclass='WesternExtra-weapon'>
<slotname='weapon'></slot>
</section>
</template>
western-extra.js

Aurelia Slots

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment