javascript - 在具有脚本标签的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

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

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。