时间戳

首页 > 解决方案 > 无法创建 WebComponent 来扩展 Aframe 的 AEntity

web-component - 无法创建 WebComponent 来扩展 Aframe 的 AEntity

问题描述

我正在尝试通过 WebComponent 扩展 AFRAME.AEntity。我知道这不是 AFRAME 的用途，但它仍然应该工作。我正在构建类似于 react/vue/angular 的视图框架。它适用于 HTML 合成，也应该适用于 Aframe 合成，但仅针对这一问题。

customElements.define('vr-box', VrBox, { extends: 'a-entity' });

当我尝试定义我的 WebComponent 时，出现以下错误（Chrome）；

未捕获的 NotSupportedError：无法在“CustomElementRegistry”上执行“定义”：“a-entity”是有效的自定义元素名称”

这似乎暗示我不能“扩展”某些东西，因为它已经存在？！如果我尝试扩展 HTMLDivElement，一切正常。除了 VrBox 没有被渲染，因为 DIV 在 AFRAME 上下文中没有意义。但是 DOM 符合预期。

我创建了一个突出问题的片段；

class VrBox extends AFRAME.AEntity {
    constructor() {
        super();
        const shadow = this.attachShadow({mode: 'open'});
        const child = document.createElement('a-box');
        shadow.appendChild(child);
        //this.innerHTML = '<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>';
    }
}

customElements.define('vr-box', VrBox, { extends: 'a-entity' });
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity is="vr-box" id="box"></a-entity>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

或在jsfiddle

标签： web-componentaframeextends

解决方案

推荐阅读