Skip to content

Instantly share code, notes, and snippets.

@bigopon
Created August 31, 2021 01:27
Show Gist options
  • Select an option

  • Save bigopon/b9e3e474e442febacd126aeee14a64ea to your computer and use it in GitHub Desktop.

Select an option

Save bigopon/b9e3e474e442febacd126aeee14a64ea to your computer and use it in GitHub Desktop.
process-content auslot example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.js.
-->
<body>
<my-app></my-app>
<script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>
{
"dependencies": {
"aurelia": "latest"
}
}
import { customElement } from 'aurelia';
@customElement({
name: 'btn',
template: '<b><au-slot>',
processContent: node => {
const template = document.createElement('template');
template.setAttribute('au-slot', '')
while (node.firstChild) {
template.content.appendChild(node.firstChild)
}
node.appendChild(template);
}
})
export class Btn {
}
import Aurelia from 'aurelia';
import { MyApp } from './my-app';
Aurelia.app(MyApp).start();
<import from="./btn"></import>
<btn>${message}</btn>
export class MyApp {
message = 'Hello Aurelia 2!';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment