在具有脚本标签的情况下在 createdCallback 中获取完整 innerHTML 的方法

Question

<script>
  var proto = Object.create(HTMLElement.prototype);
  proto.createdCallback = function() {
    this._innerHTML = this.innerHTML;
  }
  document.registerElement('template-mini', {
    prototype: proto
  })
</script>

<template-mini id='example1'>
  <script type='text/beforeUpdate'>
    console.log('hi')
    this.name = 'Bob'
  </script>
  <p>hello {{name}}</p>
</template-mini>

<template-mini id='example2'>
  <p>hello</p>
  <script type='text/beforeUpdate'>
    console.log('hi')
  </script>
</template-mini>

<script>
  console.log(example1._innerHTML)
  console.log(example2._innerHTML)
</script>

我正在开发一个名为 template-mini https://github.com/zhoukekestar/webcomponents/tree/master/components/template-mini

的自定义元素

当我使用这个迷你模板时，我需要一个预处理器来修改数据或添加一些可以在模板中使用的函数。所以我输入了一个脚本 beforeUpdate，不幸的是，我遇到了以下问题：

https://bugs.chromium.org/p/chromium/issues/detail?id=502872

我该怎么办？我想获得完整的 innerHTML（脚本将由我的自定义元素执行）。

Answer 1

有几种解决方案。

1. 如果可以，请等待文档加载完成后再注册<template-mini>自定义元素。因此，当 createdCallback() 被调用时，您将确保元素的内容被完全解析：

document.addEventListener( 'DOMContentLoaded', function () {
    document.registerElement( 'template-mini', { prototype: proto } )
} )

2. 使用不同于 <script> 的其他标签，例如 <script-mini>。无论如何，由于其特定的 type 属性，它不会被解释为普通的 script 元素。

3. 您可以使用 setTimeout() 或 requestAnimationFrame():

等函数来推迟获取内容的时间

proto.createdCallback= function () {
    setTimeout( function ( e ) {
        e._innerHTML = e.innerHTML  
        console.log( e._innerHTML ) 
    }, 0, this )
}

我推荐解决方案 2。

在具有脚本标签的情况下在 createdCallback 中获取完整 innerHTML 的方法

The way to get full innerHTML in createdCallback while it has script tags

javascript

custom-element