如何获取自定义元素的内容

Question

如何获取自定义元素的内容

Den*_*que 6 html javascript web-component

我正在创建一个自定义元素，它将能够将其内容从 Markdown 转换为 HTML。但是，我无法获取自定义元素的内容。

<!doctype html>
<html>
<body>
   <template id="mark-down">
      <div class="markdown"></div>
   </template>
   <!-- Converts markdown to HTML -->
   <script src="https://cdn.jsdelivr.net/gh/showdownjs/showdown/dist/showdown.js"></script>
   <script>
      customElements.define('mark-down',
         class extends HTMLElement {
            constructor() {
               super()
               let template = document.querySelector('#mark-down').content
               this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true))
            }
            connectedCallback() {
               console.log(this) // Returns the whole <mark-down> node and its contents
               console.log(this.innerHTML) // So why does this return a blank string?
               // This should theoretically work --> let markdown = this.innerHTML
               let markdown = '## Test'
               let converter = new showdown.Converter()
               let html = converter.makeHtml(markdown)
               this.shadowRoot.innerHTML = html;
            }
         });
   </script>

   <main>
      <mark-down>
## Our Markdown

These contents should get converted

* One
* Two
* Three
      </mark-down>
   </main>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我的问题在connectedCallback(). 记录时this，我得到整个<mark-down>节点及其内容在降价。但是，它似乎没有有效的属性。使用innerHTML返回一个空白，它应该返回降价；其他组合，如this.querySelector('mark-down'), return null。

如何获取自定义元素的内容？

Answer 1

Dan*_*man 8

我被这个问题困扰了很多，我特意问了一个 StackOverflow 问题供人们查找

在connectedCallback中等待Element Upgrade：FireFox和Chromium差异

setTimeout最简单的解决方法是connectedCallback

<script>
  customElements.define('my-element', class extends HTMLElement {
    connectedCallback() {
      console.log(this.innerHTML);// "" in all Browsers
      setTimeout(() => {
        // now runs asap 
        console.log(this.innerHTML); // "A"
      });
    }
  })
</script>

<my-element>A</my-element>

Run Code Online (Sandbox Code Playgroud)

这个和所有提到的解决方法的作用是推迟代码执行，直到 DOM 被完全解析。
setTimeout之后运行DOMContentLoaded，但是如果您将整个元素创建中的所有内容都包含在运行较晚的情况下，则同样适用于或放置在页面末尾DOMContentLoadeddefer<script>

Supersharp 更好地解释了原因：

在connectedCallback中等待Element Upgrade：FireFox和Chromium差异

归档时间：	5 年，10 月前
查看次数：	510 次
最近记录：	5 年，10 月前