Skip to content

Instantly share code, notes, and snippets.

@khrome

khrome/brokenNesting.html

Last active July 13, 2025 19:35
Show Gist options
  • Save khrome/e25daf5e81da0c7040160ecdd1dec16c to your computer and use it in GitHub Desktop.
Save khrome/e25daf5e81da0c7040160ecdd1dec16c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
brokenNesting.html
<html lang="en">
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/styles/themes/default.css" >
<script type="module">
import {discover, setBasePath} from 'https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/webawesome.loader.js';
setBasePath('https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/');
const discoverDeep = (scope = document) => {
discover(scope);
const roots = Array.from(scope.querySelectorAll('*')).map(el => el.shadowRoot).filter(Boolean);
roots.forEach(root => discoverDeep(root));
}
export class SamplePage extends HTMLElement {
constructor() {
try{
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/styles/themes/default.css" >
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/styles/webawesome.css" >
<!--<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/webawesome.loader.js"></script>-->
<!--<link rel="import" href="dependencies.html" >-->
<slot name="page-header"></slot>
<slot name="page-content"></slot>
<br>
<wa-button>WA Button</wa-button>
<br><br>
<div>
<div>
<wa-slider value="50"></wa-slider>
</div>
</div>`;
}catch(ex){
console.log('ERROR!', ex);
}
}
}
customElements.define('sample-page', SamplePage);
discoverDeep(document);
</script>
</head>
<body>
<sample-page>
<div slot="page-content">
BAR
</div>
<div slot="page-header" >
<wa-button>FOO</wa-button>
</div>
</sample-page>
</body>
</html>
Raw
fix.html
<html lang="en">
<head>
<title>Nesting in a Vanilla WebComponent</title>
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/styles/themes/default.css" >
<script type="importmap">{ "imports" :{
"webawesome":"https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/webawesome.loader.js"
}}</script>
<script type="module">
import { discover, setBasePath } from 'webawesome';
const cdn = 'https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/'
setBasePath(cdn);
export class SamplePage extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<wa-page>
<link rel="stylesheet" href="${cdn}styles/themes/default.css" >
<link rel="stylesheet" href="${cdn}styles/webawesome.css" >
<div slot="header">
<slot name="page-header"></slot>
</div>
<div slot="main">
<slot name="page-content"></slot>
</div>
<br>
<div slot="main-header">
<div>
<div>
<wa-slider value="50"></wa-slider>
</div>
</div>
</div>
<div slot="footer">
<wa-button>BAR</wa-button>
</div>
</wa-page>`;
discover(this.shadowRoot);
}
}
customElements.define('sample-page', SamplePage);
</script>
</head>
<body>
<sample-page>
<div slot="page-content">
<span>BAZ BAZ BAZ</span>
</div>
<div slot="page-header" >
<wa-button>FOO</wa-button>
</div>
</sample-page>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment