我正在使用Web Components v1.
假设有两个自定义元素:
家长element.html
<template id="parent-element">
<child-element></child-element>
</template>
儿童element.html
<template id="child-element">
<!-- some markup here -->
</template>
我试图在连接时使用connectedCallbackin parent-element初始化整个父/子DOM结构,这需要与定义的方法进行交互child-element.
但是,似乎child-element没有正确定义当时connectedCallback被解雇customElement:
家长element.js
class parent_element extends HTMLElement {
connectedCallback() {
//shadow root created from template in constructor previously
var el = this.shadow_root.querySelector("child-element");
el.my_method();
}
}
这不起作用,因为它el是一个HTMLElement而不是child-element预期的.
我parent-element的模板中的所有子自定义元素都已正确附加后,我需要回调.
这个问题的解决方案似乎不起作用; this.parentElement在null里面child-element connectedCallback().
ilmiont
我正在创建一个自定义元素，它将能够将其内容从 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 …我有一个元素的引用，该元素有时会升级为自定义元素。我如何等待它升级？
例如，假设el是参考。如果假设为此目的附加了承诺，则代码可能类似于
await el.upgradePromise
// do something after it has been upgraded.
那当然不存在，但是描述了我想做什么。也许没有轮询就没有办法吗？如果使用轮询，我将轮询什么（假设我没有对应该升级到的类构造函数的引用）。也许我可以轮询el.constructor并等待其不属于HTMLElement，或等待它不被HTMLUnknownElement？
编辑：对于背景，我有一些类似以下的代码，其中使用setTimeout是为了使代码正常工作的技巧。第一个console.log输出false，而超时中的一个输出true。
import OtherElement from './OtherElement'
class SomeElement extends HTMLElement {
attachedCallback() {
console.log(this.children[0] instanceof OtherElement) // false
setTimeout(() => {
console.log(this.children[0] instanceof OtherElement) // true
}, 0)
}
}
在哪里OtherElement引用将在某个时候注册的Custom Element类。请注意，我使用的是Chrome v0 document.registerElement。需要超时，因为如果SomeElement首先按以下代码OtherElement注册，则将尚未注册，因此，因此如果SomeElement元素的子级是的实例OtherElement，那么在升级这些元素之前不会如此下一个。
document.registerElement('some-el', SomeElement)
document.registerElement('other-el', OtherElement)
理想情况下，这样的超时是不希望的，因为如果升级花费了更长的时间（由于某些未知原因，可能取决于浏览器的实现），那么超时破解也将失败。
我想要一种绝对的方式来等待升级，而不会出现故障，并且如果可能的话也不会进行轮询。也许过一段时间也需要取消吗？
编辑：理想的解决方案将使我们能够等待任何第三方自定义元素的升级，而无需在运行前修改这些元素，也不必在运行时进行猴子补丁。
编辑：从观察Chrome的v0行为来看，似乎第一个调用document.registerElement('some-el', SomeElement)导致那些元素升级，并且在注册之前attachedCallback …
我在 TypeScript 中实现了一个 WebComponent，如下所示，并通过 WebPack 捆绑：
class MyTestComponent extends HTMLElement {
// ...
connectedCallback() {
this.config = JSON.parse(this.innerText);
// ...
customElements.define("my-test", MyTestComponent);
在网页中它的使用方式如下：
<my-test>
{
"parts": [
[3, "red"]
]
}
</my-test>
This worked fine using my WebPack genrated test page, but failed if I included the component into another page. I spend some time until I figured out that the defer attribute at the including script tag makes the difference. If I use defer the component works fine. If …