Создание пользовательского элемента с примечаниями - PullRequest
Новая
       35

Создание пользовательского элемента с примечаниями

0 голосов
/ 24 февраля 2020

Я хочу создать пользовательский веб-элемент, который служит оболочкой библиотеки remarkjs, идея состоит в том, чтобы создать пользовательский элемент с атрибутом value, чтобы заставить компонент слайд-шоу вставлять в любое место, проблема, которую я имею право Теперь, является то, что функция для инициализации remarkjs вызывается много раз, и из-за этого я получаю Maximum call stack exceeded, вот код, который я до сих пор: 

// define the component's HTML template
const template = document.createElement('template');
template.innerHTML = `
  <style>@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }</style>
`;

class SlideshowComponent extends HTMLElement {
  // define the observedAttributes array 
  static get observedAttributes() {
    return ['value'];
  }
  // define properties to store references to DOM elements in the component's template
  $slideshow;

  constructor(attributes = {}) {
    // always do a super() call first to ensure that the component inherits the correct prototype chain and all properties and methods of the class it extends. 
    super();

    Object.keys(attributes).forEach((k) => this.setAttribute(k, attributes[k]))
    this.root = this.attachShadow({ mode: 'open' })

    this.shadowRoot.appendChild(template.content.cloneNode(true));

  }
  connectedCallback() {

  }
  disconnectedCallback() {

  }
  attributeChangedCallback(name, oldValue, newValue) {
  console.log('test')
    remark.create({
    source: `class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction
`
    })
  }

  adoptedCallback() {
    console.log('I am adopted!');
  }

   _initSlideshow() {
    this.$slideshow = remark.create({
    source: `class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction
`
    });
  }
}

customElements.define('slideshow', SlidedhowComponent);

Я пытался использовать throttle функция loadash, но она не работает, я что-то здесь не так делаю?

...