dart - 在Dart中动态添加WebComponent？-6ren

dart - 在Dart中动态添加WebComponent？

转载作者：行者123 更新时间：2023-12-03 02:58:57

25

4

我试图遵循此处找到的代码:

component_created_in_code_test.html

component_created_in_code.dart

但是，当我获得依赖关系并在dartium中运行代码时，出现以下错误。调用ComponentItem的create()方法(在.dart代码中)时，会发生此错误:

Breaking on exception: Class 'SayHello' has no instance method 'created_autogenerated'.

我在下面略微重写了它们(代码是相同的，除了main已移为 Dart 代码而不是内联):

<!-- component_created_in_code_test.html -->
<!doctype html>
<!--
Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="packages/web_ui/testing/testing.js"></script>
</head>
<body>
  <element name="say-hello">
    <template>Hello {{name}}!</template>
    <script type='application/dart' src="component_created_in_code.dart">
    </script>
  </element>
  <say-hello name="component create in html"></say-hello>
</body>
</html>

以及以下的镖代码，

//component_created_in_code.dart

library component_created_in_code;

import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';

class SayHello extends WebComponent {
  String name;
}

void main() {
  Timer.run(() {
    var hello = new SayHello()
    ..host = new DivElement()
    ..name = 'component created in code';

    // "hello" is the DOM node.
    // "hello.xtag" is your SayHello object.
    // We are working on making these be the same object.

    // If the component uses data-binding, we need to make sure the
    // "lifecycle" methods get called. We are working to make this be
    // automatic too.
    var lifecycleCaller = new ComponentItem(hello)..create();
    document.body.nodes.add(hello.host);
    lifecycleCaller.insert();
    window.postMessage('done', '*');
  });
}

似乎此dart-lang示例存在问题。我错过了什么吗？还是代码很枯燥？

在回答了这个问题之后，我打包了该问题的有效解决方案。

component_created_in_code

只需从git中提取，然后导入dartEditor。然后从编辑器中“发布安装”和“重新分析源代码”(从不伤心)，然后在“web / component_created_in_code.html”上右键单击“在Dartium中运行”。

最佳答案

听起来您需要首先运行Web UI编译器。在您的HTML文件上运行packages / web_ui / dwc.dart，或者按照以下方式编写build.dart:

import 'dart:io';
import 'package:web_ui/component_build.dart';

void main() {
  build(new Options().arguments, ['web/component_created_in_code_test.html']);
}

关于dart - 在Dart中动态添加WebComponent？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17006452/

25

4

0

文章推荐： dart - forEach 和 for (var o in objs) 之间的性能差异

文章推荐： django - 如何给选项标签添加属性？

文章推荐： dart - Dart中类似Maven的结构似乎不可能

web-component - 当使用 webcomponents-loader 而不是 webcomponents-lite
我的 bower.json 中有这两个依赖项:Polymer/polymer#^2.6.0 和 webcomponents/webcomponentsjs#^v1.1.0。在我的 index.htm
javascript - 使 webcomponents 捆绑一个 npm 包，以便可以有选择地导入 webcomponents
在我当前的项目中，我们正在根据 v1 规范构建 native Web 组件，我们目前正在webpack单个包 comp-webcomponents.js 中。这是我们当前包的入口点文件: impor
javascript - WebComponents 将元素添加到侧边栏
我即将学习 vanilla js Web 组件。我可以成功渲染一些由网络组件生成的元素，现在我想给它一些设计并将其放在侧边栏中。但是我不确定这是网络组件还是只是设计问题，添加侧边栏后元素将不再显示。
javascript - WebComponents - 属性已更改
来自链接qr-code.js我有下面的代码。那我就不明白了，关于highlighted line (60) ，后缀:“已更改”是什么意思？ attributeChangedCallback: {
javascript - webcomponent 中的子元素
假设我们有一个自定义元素以这种方式使用: .... 其中list-image以 slider 方式显示img标签。如果组件的用户插入带有的 img 标签 document.q
dart - webcomponents.js失败，错误404
运行与webcomponents.js相关的dart应用程序时，控制台中出现异常一切都按预期运行，我应该忽略此异常吗？ Failed to load resource: the server res
javascript - Webcomponents polymer 元素不可见
我正在尝试在我的项目中使用 PolymerElements，已导入所有库，但屏幕上没有任何内容(在 DOM 树的控制台中，所有元素都就位，因此它们目前不可见) . 你能告诉我我做错了什么吗？这是我的
dart - 添加动态 WebComponent div
我正在尝试使用 Dart 动态添加多个 div。 div 包含一个自定义 Web 组件，我正在尝试传入一个变量。我希望能够指定 n 个变量，将它们传递给 n 个组件，然后将它们插入到 HTML 文档中
dart - 如何让 WebComponent 类调用我的自定义构造函数？
我创建了一个 WebComponent，并在其中为它创建了一个构造函数。运行时，这个构造函数似乎没有被调用，虽然其余的组件可以工作，但它们必须在我的自定义构造函数之外创建。这是我正在谈论的一个例子。
polymer - WebComponents/Polymer - 树中的生命周期回调排序
假设我有以下 html: 现在，假设这被解析为 DocumentFragment。现在，我将片段插入到文档中。这些自定义元素的attachedCallback
javascript - 无法从页面调用 Webcomponent 方法
我尝试制作一个简单的网络组件(使用 webcomponents.js v 0.7.23)。该组件有一个方法 (setTitre())。如果我在启动时在我的 HTML 页面中调用此方法，Chrome 是
javascript - Webcomponents Polyfill 不工作
我正在尝试按照 https://www.webcomponents.org/polyfills/ 中的说明填充 Web 组件因为我希望我的示例应用程序可以在 Chrome 和 Firefox 上运行。
javascript - 在页面准备好之前动态加载 WebComponents Polyfill
我正在开发一个小部件库，这样客户只需在中导入一个 javascript 文件他们的文件。加载该文件后，用户应该能够使用从头部加载的单个脚本加载的自定义元素。问题是我需要使用 WebCompone
javascript - WebComponent adoptedCallback 什么时候触发？
在 MDN 文档中，我看到 WebComponents 可以实现的一个函数叫做 adoptedCallback。 MDN 文档指出: “当自定义元素移动到新文档时调用。” https://develo
javascript - HTMl 导入自己的 WebComponent
在我的 index.html 中，我导入了一个带有模板、Shadow DOM 等的外部 HTML 文件。一个自定义 Web 组件。 //索引.html ... ... 和另一个文件 user
html - 为什么我不能在 WebComponent 元素上设置大小
我正在尝试使用 :host 选择器在 WebComponent 中设置 width 和 height，但大小没有改变。这是组件的模板: :host { width: 100
vue.js 注册 webcomponent
我正在使用 vue.js 并使用 stencil.js 创建了一个网络组件。我不想将 webcomponent 发布到 npm，这就是为什么我只是将它包含在我的 vue 项目中的 src/assets
javascript - Webcomponents v1 - 非法构造函数
尝试使用 webcomponents 但遇到了一个我没有得到的错误。标记很简单，应该可以工作。 2个文件，都是html文件。错误标记在上在控制台中标记。感谢您的帮助。附言。我正在运行 Go
javascript - 使用内容创建 Kotlin/JS WebComponent
我要create a custom tag with Kotlin包含默认内容。链接的示例工作正常，但我没有设法将一些默认内容(例如输入元素)添加到自定义标签。我尝试了不同的方法，但到目前为止，我只
vue.js - Vue3 webcomponents 生产构建问题
我正在尝试将我的 vue2 webcomponent 迁移到 vue3，但在我为生产创建构建时出现了问题。我使用带有 --target wc 的 vue-cli 现在显示一条错误，指出 vue3 w

首页

博学

6Ren·AI

商城

dart - 在Dart中动态添加WebComponent？