Function component w/ prop updates
import { registerFunctionComponent } from './webact.js';
async function NiceButton (initialProps) {
const { html, css, propsChanged, postRender, $ } = this;
html`
<button>
<slot></slot>
</button>
`;
css`
button {
background-color: blue;
color: white;
padding: 1rem;
border: 1px solid yellow;
border-radius: 4px;
}
`;
const updateContent = ({ value }) => {
// This will be the unnamed <slot>.
host.textContent = value;
};
postRender(() => updateContent(initialProps));
propsChanged(updateContent);
}
registerFunctionComponent(NiceButton, {
observedAttributes: ['value']
});