問題タブ [web-component]

新しいWebコンポーネントの構造をレイアウトしようとしていますが、現在、理想的に必要なすべてのことを実行できるツール、または非常に近いツールを見つけたかどうかはわかりませんが、かなり近いと思われます。最近やりたいことはよくあることです。

Javaサーバー側を実行しているWebアプリケーションがありますが、クライアント側ではJavaScriptやSASSなどを多用しています。コードベースの一部を再構築し、動的ページコンテンツの特定の側面をコンポーネント化することを目指しています。

たとえば、完全なWebアプリとは完全に独立して開発できる標準のテーブルコンポーネントが必要です。次の3つのコアファイルを持つテーブルコンポーネントが表示されます。

• table.js
• table.scss（CSSファイルにコンパイルされるSASSファイル）
• table.tmpl（最終的にJS関数にコンパイルされるテンプレートファイル。たとえば、テンプレートエンジンとしてハンドルバーを使用します）

そして、開発を支援するために：

• table-test.html（ダミーデータを含むテストページ）
• table-qunit.js（Qunitテスト）

これらのファイルはすべて、うまくいけば次のようにコンパイルされます。

• components.js-table.jsとtable.tmplをコンパイルして縮小し、他のすべてのコンポーネントとともにいくつかの大きなJSファイルにプルしました
• components.css-コンパイルおよび圧縮され、他のすべてのコンポーネントCSSとマージされたtable.scss

私が見たツール：

• requireJS-リソースファイルについていくらか考えてJS依存関係管理を非常にターゲットにしているようですが、その使用法とSASSのようなCSSプリプロセッサについては何も見つかりません。ただし、 AMDJSの依存関係管理のアイデアはとても気に入っています。
• Grunt-私たちが望むことのいくつかを実行するノードパッケージ
• スプロケット-私たちが望むものに似たもののRuby実装
• Javascript Mavenプラグイン-言語/ライブラリ（すでにJavaとMav​​enを使用しています）の点で最も近いですが、ここでも、JavaScriptの依存関係管理のみを考慮し、CSS、または少なくともSASSリソースファイルは考慮していないようです。

上記のものよりも良い提案はありますか？私たちが探しているものに少し近づくものはありますか？理想的には、Node.jsやRubyを必要としないものが望ましいでしょう...

Webコンポーネントが表示されません。Chromeはこの権利をサポートしていますか？

is属性とJavascriptを使用して試してみました。両方とも機能していません。

インデックス（ヘッド）：

インデックス（本体）：

x-mycomp.html：

Web アプリケーションの app.dart には次のコードがあります。

App.dart から hideLogin(e) 関数を呼び出すと、Web コンポーネントが非表示になります。ただし、Web コンポーネントから呼び出しても機能しません。

css は次のように定義されています。

Dart で Web Components を使用する方法を教えるコードラボがあると聞きました。本当？もしそうなら、行き詰まったらどうすればいいですか？

DartwebComponentのフォームからデータを取得しようとしています。次のLoginComponentが定義されています。送信ボタンがクリックされた場合、doLogin関数は呼び出されません。送信ボタンにクリックハンドラーを配置しようとしましたが、それも機能しません。

フォームの送信時にdoLogin関数は呼び出されません。以下を試しましたが、それも機能しません：

目標：カプセル化されたウィジェット

私が次のような友達のリストを表示するウィジェットの開発者であるとします。

友達のマイケル、アンナ、シャーリーはこのウェブページが大好きです！

最初のアプローチ：作成するスクリプトspan

span素朴に、私はこの情報をWebサイトのに配置するスクリプトを作成します。ただし、ExampleSiteの所有者は、簡単なDOM操作で友達の名前にアクセスできるようになりました。
これはプライバシー/セキュリティの大きな問題です。

2番目のアプローチ：iframe

ExampleSiteに友達の名前へのアクセスを許可したくありません。代わりに、ウェブサイトの所有者にウィジェットを追加さ​​せますiframe：

ExampleSiteの所有者は、のコンテンツをスクレイプできないため、これは機能しiframeます。ただし、この全体iframeはかなり醜いです。なぜなら、それはWebサイトのスタイリングに統合されていないspanのですが、統合されているからです。

望ましいアプローチ：Shadow DOM

昨日ShadowDomについて読んだとき、それが両方の問題の解決策になるのではないかと思いました。spanこれにより、元のWebサイトがアクセスできないようにするスクリプトを作成できます。

ただし、** Shadow DOMはそのコンテンツを周囲のページから隠しますか？**
ここでの前提は、私​​のスクリプト以外は誰も `root`にアクセスできないということですが、それは正しいですか？

結局のところ、Shadow DOM仕様では、機能的なカプセル化が提供されていると書かれていますが、実際には信頼できるカプセル化が必要です。コンポーネントモデルのユースケースには実際にこのユースケースがリストされていますが、ShadowDOMが必要な制限プロパティを実現しているかどうかはわかりません。

次のような独自のテキスト入力 Web コンポーネントを実装したいと考えています。

問題は、ユーザーがオートコンプリート リストからアイテムを選択したときに、Web コンポーネントがどのようにイベントを発生させることができるかということです。私はこのようなものを探しています:

これを達成する方法はありますか？

Dartでは、次のようなことを試みています:

SelectOptions 呼び出しで実行するオンロード (またはオンロードなど) メソッドを取得できません。これは、テストとしてコンソールに出力する単純な Hello World 行です。

Dart の WebUI で要素の初期ロード時にメソッドを呼び出す方法はありますか?

html5rocks でShadow DOM 101 チュートリアルをプレイしています。Chrome 25.0.1364.172 を使用しappendChildていますが、(チュートリアルに示されているように) Shadow DOM ルートにアクセスしようとすると、 Uncaught Error: NotFoundError: DOM Exception 8. 明らかな何かが欠けていると思いますが、何がわかりません。コードは次のとおりです。

私のブラウザはチュートリアルに示されている新しいタグをサポートしていないので、<template>に変更しました<script type="text/x-tmpl">。

編集:試してみると、コンソールから同じエラーが表示されます:

以下の myapp.html のように、多数の Web コンポーネントをアプリに追加すると:

そして、以下の xclick-counter.html のように、Web コンポーネントにいくつかの要素があります。

myApp.dart から #container3 の Web コンポーネントの #button2 への参照を取得するにはどうすればよいですか?

私は以下のように参照を取得できると期待していますが、私の参照はnullであることが判明しました: