我正在创建一个 custom element这将能够将其内容从 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>我的问题在
connectedCallback() .登录时 this , 我得到了整个 <mark-down>其内容在 Markdown 中的节点。但是，它似乎没有有效的属性。使用 innerHTML返回一个空白，它应该返回 Markdown ；其他组合，例如 this.querySelector('mark-down') , 返回 null .如何获取自定义元素的内容？
最佳答案
我被咬了这个说了这么多，我特意问了一个 StackOverflow 问题让大家找
wait for Element Upgrade in connectedCallback: FireFox and Chromium differences
最简单的解决方法是 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>
setTimeout在 DOMContentLoaded 之后运行, 但是如果你换行 一切在 DOMContentLoaded整个元素创建延迟，同样适用于 defer或放置<script>在您的页面末尾Supersharp 解释了为什么更好:
wait for Element Upgrade in connectedCallback: FireFox and Chromium differences
关于javascript - 如何获取自定义元素的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62962138/