2

jQuery や仮想 DOM で作成した Polymer 1.0 タグを変更する方法を知りたいです。

Mithril.js で Polymer 1.0 を試しています。Polymer 0.5.5 には Shadow DOM があり、そのタグのリテラルと内部構造 (Chrome のインスペクター上) はほぼ同じです。しかし、1.0 は怪しげな DOM を使用し、HTML テンプレートとして機能します。

ソース：

<paper-element>hello world</paper-element>

インスペクタでのPolymer 0.5.5の結果:

<paper-button role="button" tabindex="0">hello world</paper-button>

インスペクタでのPolymer 1.0の結果:

<paper-button role="button" tabindex="0" aria-disabled="false" class="x-scope paper-button-0">
  <paper-ripple class="style-scope paper-button">
     <div id="background" class="style-scope paper-ripple"></div>
     <div id="waves" class="style-scope paper-ripple"></div>
  </paper-ripple>
  <paper-material animated="" class="content  style-scope paper-button x-scope paper-material-0" elevation="0">
    hello world
  </paper-material>
</paper-button>

たとえば、次のように jQuery コマンドを実行します。

$("paper-element").text("new label");

0.5.5 で動作します (正しいラベルが表示されます) が、1.0 では機能しません (内部タグがなくなり、単なるラベルになります)。この新しい動作は、他の DOM 操作ライブラリを介して Polymer のカスタム タグを操作する場合には適していません (最初、Mithril.js をプレイしているときにこの問題に遭遇しました)。また、内部タグを再初期化するための API が見つかりません。

仮想DOMまたはjQueryをサポートするために作成後にPolymer 1.0タグを変更する良い解決策はありますか?

更新 (2015 年 6 月 3 日)

Polymerドキュメントから解決策を見つけました。次のスニペットを追加すると、Polymer 1.0 は Mithril 仮想 DOM で動作します。

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

この設定により、Polymer はデフォルトの Shady DOM の代わりに Shadow DOM を使用し始めます。Polymer 0.5.5 と同じで、JavaScript DOM API フレンドリーです。君たちありがとう！

4

2 に答える 2

1

Polymer コレクションのような Web コンポーネントは、カスタマイズして動的に設定するのが困難です。Shadow DOM の性質により、外部からの影響を受けにくくなります。これは、私の意見では、Web コンポーネントの重大な制限です。

ただし、これらの要素をミスリル コンポーネントとして再構築して、カスタム コントロールを可能にすることは可能です。Polytheneという名前でNPMとGithubに Mithril で作成されたマテリアル デザイン要素の優れたコレクションがあります。

于 2015-06-02T04:16:39.257 に答える