µCE
artydev
Posted on October 18, 2020
...µhtml based Custom Elements...
You can test it here : µCE
devuser : <input oninput="fetchUserPosts(this.value)"/>
<dev-articles id="devuser" username="artydev" />
import {define, html} from 'https://unpkg.com/uce?module';
const urlDev = (username) =>
`https://dev.to/api/articles?username=${username}`
define('dev-articles', {
callApi: username =>
fetch(urlDev(username))
.then(data => data.json()),
observedAttributes: ['username'],
async attributeChanged(key, _, value) {
var posts = await this.callApi(value)
this.render(posts)
},
fetchUser(e) {
devuser.setAttribute("username", e.target.value)
},
render(posts) {
posts && this.html
`
<center style="display:block">
devUser: <input oninput="${(e) => this.fetchUser(e)}"/>
</center>
<ul>
${posts.map((t) => html`<li>${t.title}</li>`)}
</ul>
`
}
});
💖 💪 🙅 🚩
artydev
Posted on October 18, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.