Добавить новый контент в пользовательский элемент html - PullRequest
Новая
       35

Добавить новый контент в пользовательский элемент html

0 голосов
/ 02 мая 2020

Я и мой друг делаем javascript фреймворк для создания веб-приложений. мы сейчас находимся на ранних стадиях, но получили что-то подобное, чтобы работать 

let header1 = ether.createHeader({
     'type': 1,
     'title': 'Ether.JS',
     'hasDrawerButton' : true 
})

ether.renderComponent(header1)

, это круто, и все, но мы хотим иметь возможность размещать небольшие пользовательские компоненты внутри других компонентов. Может быть, что-то вроде этого 

let ether = new Ether();

let button1 = ether.createButton()

let header1 = ether.createHeader({
      'type': 1,
      'title': 'Ether.JS',
      'hasDrawerButton' : true 
}).appendComponent(button1)

ether.renderComponent(header1)

, но я не могу понять, как добавить элемент в свой пользовательский элемент после его создания

, это то, что у меня пока есть для моего пользовательского element 

class Header extends HTMLElement {

  constructor(options) {
    super();
    this.title = options.title;
    this.type = options.type;
    this.hasDrawerButton = options.hasDrawerButton;
  }

  connectedCallback() {
    this.createInitialElement()
    this.setupDrawer()

  }

  createInitialElement(){
    this.innerHTML =
    `
    <div class="--e-header-1">
      <slot id="drawer-button">
      </slot>
      <div class="header-title">
        <h1>${this.title}</h1>
      </div>
    </div>
    `
  }

  appendComponent(component){
    console.log(component)
    this.appendChild(component)
  }

  setupDrawer(){
    if(this.hasDrawerButton == true){
      console.log('ok')
      var el = new Button()

     // this.getElementsByTagName("div").appendChild(el)
    }
  }

}

после того, как компонент сделан, я хотел бы либо проверить, есть ли у него ящик, либо использовать метод, упомянутый выше, но я не могу ничего добавить в него правильно, мне нужно получить добавленный элемент внутри элемента, подобный этому 


<--e-header-1>
    <div class="--e-header-1">
        <!-- this is where i need to put the element at -->
      <div class="header-title">
        <h1>${this.title}</h1>
      </div>
    </div>
</--e-header-1>
...