3

こんにちは、Chrome と Opera で Polymer 1.0 の Web ページを作成しています。次に、このページを Firefox と Safari で実行する必要があります。次のテストがあります。

<!DOCTYPE html>
<html>
    <head>
        <?php use Cake\Routing\Router; ?>
        <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
        <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">

        <dom-module id="test-element">
            <template >
                <h1>It works</h1>
            </template>
            <script>
                Polymer({
                    is: "test-element"
                });
            </script>
        </dom-module>
    </head>
    <body unresolved>
        <test-element></test-element>
    </body>
</html>

変えてみました

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>

に

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>

また

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?>

webcomponents の Polyfills が html のインポートを処理すると思いました。しかし、それは機能していません。firefox では、次のエラーが表示されます。

ReferenceError: Polymer is not defined

Safari でテストすることはできませんでしたが、同様の結果が期待できます。

私は何か間違ったことをしていますか？どうすればこれを機能させることができますか？

また、webcomponents を削除し、bower update を実行して再度インストールしてみました。

ありがとうございました

編集：

私は2つのファイルを持っています。index.html:

<!DOCTYPE html>
<html>
    <head>
        <?php use Cake\Routing\Router; ?>
        <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
        <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
        <?=  $this->element('Polymer/test-element');?>
    </head>
    <body unresolved>
        <test-element></test-element>
    </body>
</html>

および要素ファイル:

<dom-module id="test-element">
    <template >
        <h1>It works</h1>
    </template>
    <script>
        addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element"
            });
        });
    </script>
</dom-module>

これはうまくいきます。私の問題は、addEventListener を削除した場合です。Firefox でも同じエラーが発生します。

ReferenceError: Polymer is not defined

ポリフィルが時間内にロードされなかったかのように。これを修正する方法はありますか？addEventListener を追加するのは正しい方法ですか?

ありがとうございました

4

1 に答える 1

10

addEventListener('WebComponentsReady', function() {}) の下に JavaScript をラップしてみてください。

addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element"
            });
})

これにより、Web コンポーネントのポリフィルがサポートされていないブラウザーでも確実に完成します。要素が html インポートを使用してインポートされる場合、イベント リスナーは必要ありません。詳細については、 https://github.com/webcomponents/webcomponentsjs#webcomponentsreadyを参照してください。

編集に対する応答: テスト要素ファイルに Polymer.html をインポートし、index.html ファイルから「削除」します。最善の方法は、elements.html ファイルを定義し、すべての要素 (test-element を含む) を elements.html ファイルにインポートし、elements.html ファイルを index.html ファイルにインポートすることです。また、各要素ファイル (test-element.html など) で、すべての依存関係を必ずインポートしてください。ポリマースターターキットから始めることをお勧めします

于 2015-10-21T17:39:23.027 に答える