问题标签 [web-component]

我正在寻找布局我们新 Web 组件的结构，目前我不确定我是否找到了一个工具可以完成我们理想中的所有工作，或者非常接近，但它似乎是一个相当不错的工具现在想做的事情很普遍。

我们有一个运行 Java 服务器端的 Web 应用程序，而客户端我们大量使用 JavaScript 和SASS等。我们正在寻求重新构建我们的一些代码库，并对我们动态页面内容的某些方面进行组件化。

例如，我们想要一个标准的表格组件，可以完全独立于完整的 Web 应用程序进行开发。我看到 table 组件具有以下 3 个核心文件：

• 表.js
• table.scss（我们编译成 CSS 文件的 SASS 文件）
• table.tmpl（我们的模板文件最终编译成 JS 函数，例如使用Handlebars作为模板引擎）

然后帮助开发：

• table-test.html（带有一些虚拟数据的测试页面）
• table-qunit.js（Qunit测试）

然后，所有这些文件都有望被编译成以下内容：

• components.js - 编译和缩小 table.js 和 table.tmpl，然后将所有其他组件拉入一些更大的 JS 文件
• components.css - table.scss 编译和压缩，并与所有其他组件 CSS 合并

我看过的工具：

• requireJS - 似乎非常针对 JS 依赖管理，对资源文件有一些想法，但找不到任何关于它的使用和 CSS 预处理器（如 SASS）的信息。不过，我确实非常喜欢AMD JS 依赖管理的想法。
• Grunt - 一个节点包，可以完成我们想要的一些事情
• Sprockets - 类似于我们想要的东西的 Ruby 实现
• Javascript Maven 插件- 在语言/库方面最接近（我们已经使用 Java 和Maven），但同样，似乎只考虑 JavaScript 依赖管理而不考虑 CSS，或者至少是 SASS 资源文件。

有没有人有比上面那些更好的建议？任何与我们正在寻找的东西更接近的东西？理想情况下，不需要 Node.js 或 Ruby 的东西会更好......

我的网络组件没有显示。Chrome确实支持这个吗？

我已经使用is属性和使用 Javascript 进行了尝试。两者都不起作用。

索引（头部）：

索引（正文）：

x-mycomp.html：

Web 应用程序在 app.dart 中有以下代码

从 App.dart 调用 hideLogin(e) 函数会隐藏 Web 组件。但从 Web 组件调用它不起作用。

css定义如下：

听说有个 codelab 教你如何在 Dart 中使用 Web Components？真的吗？如果是这样，如果我被卡住了怎么办？

我正在尝试从 Dart webComponent 中的表单获取数据。定义了以下 LoginComponent。单击提交按钮时不会调用 doLogin 函数。尝试在提交按钮上放置点击处理程序，但这也不起作用。

提交表单时不会调用 doLogin 函数。尝试以下但也不起作用：

Goal: an encapculated widget

Suppose I'm the developer of a widget showing a list of friends, such as:

Your friends Michael, Anna and Shirley love this webpage!

First approach: script that creates span

Naively, I create a script which places this information in a span on the website. However, the owners of ExampleSite can now access the names of your friends by simple DOM operations!
That's a big privacy / security issue.

Second approach: an iframe

I don't want ExampleSite to have access to their friends' names. So instead, I let website owners add the widget with an iframe:

This works, because the owners of ExampleSite cannot scrape the contents of the iframe. However, this whole iframe thing is rather ugly, because it does not integrate into the styling of the website, while a span does.

Desired approach: Shadow DOM

When reading about Shadow Dom yesterday, I wondered whether that could be a solution to both issues. It would allow me to have a script that creates a span the original website cannot access:

However, **does a Shadow DOM hide its contents from the surrounding page?**
The assumption here is that nobody except my script can access `root`, but is that correct?

The Shadow DOM spec after all says that it offers functional encapsulation, but I actually want trust encapsulation. And while the Component Model Use Cases actually list this use case, I'm not sure whether Shadow DOM realizes the necessary confinement property.

我想实现自己的文本输入 Web 组件，例如：

问题是，当用户从自动完成列表中选择一个项目时，我的 Web 组件如何触发事件？我正在寻找这样的东西：

有没有办法做到这一点？

在 Dart 中，我正在尝试类似：

我无法在 SelectOptions 调用中运行 on-load（或 onload，或任何东西）方法。这只是一个简单的打印 Hello World 行，用于控制台作为测试。

Dart 的 WebUI 中是否有一种方法可以在元素的初始加载时调用方法？

我正在 html5rocks 上玩Shadow DOM 101 教程。我正在使用 Chrome 25.0.1364.172，当我尝试访问appendChildShadow DOM 根目录（如教程中所示）时，我得到一个 Uncaught Error: NotFoundError: DOM Exception 8. 我想我错过了一些明显的东西，但我不知道是什么。这是代码：

由于我的浏览器不支持<template>教程中显示的新标签，因此我将其更改为<script type="text/x-tmpl">.

编辑：当我尝试时，我从控制台收到同样的错误：

如果我在我的应用程序中添加一些 Web 组件，如下面的 myapp.html 所示：

我的 Web 组件中有许多元素，如下面的 xclick-counter.html 所示：

如何从 myApp.dart 的#container3 中的 Web 组件中获取对 #button2 的引用？

我希望我可以获得如下参考，但我的参考结果为空：