Javascript 在createdCallback中获取完整innerHTML的方法，同时它具有脚本标记 var proto=Object.create（HTMLElement.prototype）； proto.createdCallback=函数（）{ this.\u innerHTML=this.innerHTML； } document.registerElement（'template-mini'{ 原型：原型 }) console.log（'hi'） this.name='Bob'

你好{{name}

你好

console.log（'hi'） console.log（示例1.\u innerHTML） console.log（示例2.\u innerHTML） 我正在开发一个名为

template mini

当我使用这个迷你模板时，我需要一个预处理器来修改数据或添加一些可以在模板中使用的函数。因此，我在更新之前键入了一个脚本

，不幸的是，我遇到了以下问题：


我该怎么办？我想获得完整的innerHTML（脚本将由我的自定义元素执行）。
有几种解决方案

1。如果可以，请等待文档加载后再注册
自定义元素。因此，在调用
createdCallback（）
时，您将确保完全解析元素的内容：

<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>

2.使用除
以外的其他标记，例如
。无论如何，由于其特定的
类型
属性，它不会被解释为正常的
脚本
元素

3.您可以使用类似于
setTimeout（）
或
requestAnimationFrame（）
的函数来推迟获取内容的时间：

我推荐解决方案2。
有几种解决方案

1。如果可以，请等待文档加载后再注册
自定义元素。因此，在调用
createdCallback（）
时，您将确保完全解析元素的内容：

<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>

2.使用除
以外的其他标记，例如
。无论如何，由于其特定的
类型
属性，它不会被解释为正常的
脚本
元素

3.您可以使用类似于
setTimeout（）
或
requestAnimationFrame（）
的函数来推迟获取内容的时间：

我推荐解决方案2。
谢谢您的评论。太棒了。我现在使用解决方案3。解决方案2也许更好。嗯。。。。现在我在我的
模板mini
中遇到了另一个关于
img
标记的问题。在我将图像附加到dom之前，它总是请求一个无效的图像。在浏览器控制台上执行的代码将请求无效的img
var wrapper=document.createElement（'div'）；wrapper.innerHTML=''
有什么想法吗？或者我必须使用这样的
'@周柯柯 你能发布另一个问题来揭露这个问题吗？我用谷歌搜索了一下，找到了一些解决方案：
或
。无论如何谢谢~@zhoukekekstar谢谢，如果有帮助的话你可以投票：-）谢谢你的评论。太棒了。我现在使用解决方案3。解决方案2也许更好。嗯。。。。现在我在我的
模板mini
中遇到了另一个关于
img
标记的问题。在我将图像附加到dom之前，它总是请求一个无效的图像。在浏览器控制台上执行的代码将请求无效的img
var wrapper=document.createElement（'div'）；wrapper.innerHTML=''
有什么想法吗？或者我必须使用这样的
'@周柯柯 你能发布另一个问题来揭露这个问题吗？我用谷歌搜索了一下，找到了一些解决方案：
或
。无论如何谢谢~@zhoukekekstar谢谢，如果有帮助的话你可以投票：-）
proto.createdCallback= function () {
    setTimeout( function ( e ) {
        e._innerHTML = e.innerHTML  
        console.log( e._innerHTML ) 
    }, 0, this )
}