Mithril의 CustomElement

내가 좋아하는 프레임워크로 customElement를 만들어 봅시다.
잘 쓰지는 않았지만 늦었습니다 :-)

여기에서 테스트할 수 있습니다RandomUsers.

<random-users count=1></random-users>

<random-users count=3></random-users>

<random-users count=5></random-users>

let styleGallery =  {
  display :"flex",
  flexWrap : "wrap", 
  justifyContent : "space-around"}

let Users = function ({attrs:{count}})  {
  let users = []
  let request = `
    https://randomuser.me/api/?results=${count}
  `
  return {
    init : m.request(request).then((d) => {
      users = d.results
    }),
    view: () => [
      m("div",{style : styleGallery}, 
        users.map((u) =>  m("div",  [      
          m("img", {src : u.picture.large}),
          m("div.name", {style : {textAlign:"center"}},   
            u.name.first + " " + u.name.last)
      ])))
    ]
}}

class ListUsers extends HTMLElement {
  constructor() {
    super(); 
    this.count = 100
  }
  connectedCallback() {
   m.mount(this,  {
    view: () => 
      m(Users, {count: (this.getAttribute('count') || this.count) 
    })})
  }
}

window.customElements.define('random-users', ListUsers);