Fix semantic HTML for better embedding

This commit is contained in:
Matthew Cardarelli 2024-08-06 19:19:52 -07:00
parent dc95275086
commit 30d6d1dddd
2 changed files with 41 additions and 40 deletions

View File

@ -82,7 +82,8 @@ export const AnimatedListDemo = () => {
useAnimatedListItems({ keys: items }); useAnimatedListItems({ keys: items });
return ( return (
<main> <>
<div className="buttons">
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@ -119,7 +120,7 @@ export const AnimatedListDemo = () => {
> >
Remove Remove
</button> </button>
</div>
<ol> <ol>
{items.map((item) => { {items.map((item) => {
return ( return (
@ -133,6 +134,6 @@ export const AnimatedListDemo = () => {
); );
})} })}
</ol> </ol>
</main> </>
); );
}; };

View File

@ -10,7 +10,7 @@ class AnimatedListComponent extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
const rootNode = document.createElement('main'); const rootNode = document.createElement('section');
this.appendChild(rootNode); this.appendChild(rootNode);
this.root = createRoot(rootNode); this.root = createRoot(rootNode);
this.root.render(<AnimatedListDemo />); this.root.render(<AnimatedListDemo />);