在safari和firefox上渲染Polymer web应用程序

时间:2016-05-30 11:15:06

标签: html5 firefox safari polymer

我在Safari上渲染我的webapp时遇到了噩梦。我的自定义元素中有一个铁列表,将显示的数据来自iron-ajax请求。一切都在chrome中运行良好但是当我在safari上测试它时,它没有正确呈现。这是我在钩子下注意到的, 野生动物园:

<iron-list id="abc" style="min-height: 50px; overflow: auto;" selection-enabled="" class="style-scope view-file x-scope iron-list-0">


  <array-selector id="selector" class="style-scope iron-list">
  </array-selector>

  <div id="items" class="style-scope iron-list" style="height: 15008px;">

    <template class="style-scope view-file"></template>

    <div class="style-scope view-file" style="transform: translate3d(0px, 0px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="0">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">disk</label>
          </div>
          <div class="cell ctime style-scope list-row">29 May 2016 at 21:32:38 GMT+2</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 1876px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">lost+found</label>
          </div>
          <div class="cell ctime style-scope list-row">29 May 2016 at 21:32:20 GMT+2</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 3752px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">private</label>
          </div>
          <div class="cell ctime style-scope list-row">29 May 2016 at 21:32:38 GMT+2</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

  </div>

</iron-list>

display on safari

表示chrome:

<iron-list id="abc" style="min-height: 50px; overflow: auto;" selection-enabled="" class="style-scope view-file x-scope iron-list-0">


  <array-selector id="selector" class="style-scope iron-list">
  </array-selector>

  <div id="items" class="style-scope iron-list" style="height: 328px;">

    <template class="style-scope view-file"></template>

    <div class="style-scope view-file" style="transform: translate3d(0px, 0px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="0">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">disk</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 41px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">lost+found</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:20 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 82px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">private</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 123px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">public</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 164px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">replica</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 205px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">reserved</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 246px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">resilient</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

    <div class="style-scope view-file" style="transform: translate3d(0px, 287px, 0px);">
      <list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
        <div id="row" class="row style-scope list-row">
          <file-type-icon style="padding-left: 10px;" class="style-scope list-row">

            <iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
              <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                <g class="style-scope iron-icon">
                  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
                </g>
              </svg>
            </iron-icon>
          </file-type-icon>
          <div class="cell name style-scope list-row">
            <label id="filename" style="padding-left:5px;" class="style-scope list-row">tape</label>
          </div>
          <div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
          <div class="cell mtime style-scope list-row">
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
            <template is="dom-if" restamp="" class="style-scope list-row"></template>
          </div>
          <div class="cell size style-scope list-row" id="hovering">
            <span class="style-scope list-row">--</span>
          </div>
        </div>

      </list-row>
    </div>

  </div>

</iron-list>

display for chrome

从两个片段中伸出的一个主要因素是div的高度差异,对于chrome: <div id="items" class="style-scope iron-list" style="height: 328px;">

和野生动物园: <div id="items" class="style-scope iron-list" style="height: 15008px;">

以下是元素的源代码:

<link rel="import" href="../../../../bower_components/polymer/polymer.html">

<link rel="import" href="../../../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../../../bower_components/iron-selector/iron-selector.html">

<link rel="import" href="../../../../bower_components/paper-card/paper-card.html">


<link rel="import" href="../../list-view/list-row.html">
<link rel="import" href="../../access-denied-or-empty-directory/access-denied-or-empty-directory.html">


<dom-module id="view-file">
  <style>
    :host {
      @apply(--layout-fit);

@apply(--layout-vertical);

margin: 0px 30px;
      /*Prevent text selection after double click*/
      -webkit-user-select: none;
      /* webkit (safari, chrome) browsers */
      -moz-user-select: none;
      /* mozilla browsers */
      -khtml-user-select: none;
      /* webkit (konqueror) browsers */
      -ms-user-select: none;
      /* IE10+ */
    }
    .fit {
      @apply(--layout-fit);

    }
    .item {
      text-decoration: none !important;
      background-color: white;
      @apply(--layout-flex);

cursor: pointer;
    }
    .item:hover {
      background-color: #e9e9e9;
    }
    .item.selected {
      background-color: #2196F3;
      color: #fafafa;
      outline: 0;
    }
  </style>
  <template>
    <iron-ajax id="ajax" auto url="{{url}}" method="GET" content-type="application/json" headers$='[[_computeHeaders(isSomebody)]]' handle-as="json" on-response="handleResponse" last-response="{{data}}">
    </iron-ajax>
    <paper-material id="content" elevation="1">
      <template is="dom-if" if="{{hasFiles}}" restamp>
        <iron-list id="abc" items="[[data.children]]" style="min-height:50px;" selected-item="{{selectedItem}}" selected-items="{{selectedItems}}" selection-enabled>
          <template>
            <div>
              <list-row class$="[[_computedClass(selected)]]" tabindex$="[[tabIndex]]" name="{{item.fileName}}" file-type="{{item.fileType}}" ctime="{{item.creationTime}}" mtime="{{item.mtime}}" size="{{item.size}}" loc="{{item.fileLocality}}" parent-path="[[parent]]">
              </list-row>
            </div>
          </template>
        </iron-list>
      </template>
      <template is="dom-if" if="{{isEmptyDenied}}" restamp>
        <access-denied-or-empty-directory message="{{msg}}"></access-denied-or-empty-directory>
      </template>
    </paper-material>
  </template>

  <script>
    Polymer
      ({
        is: "view-file",

        properties: {
          path: {
            type: String,
            value: "/",
            notify: true
          },

          parent: {
            type: String,
            notify: true,
            computed: '_computeParentPath(path)'
          },

          selectedItems: {
            type: Object
          },

          selectedItem: {
            type: Object
          },

          isSel: {
            type: Boolean,
            notify: true
          },

          hasFiles: {
            type: Boolean,
            notify: true
          },

          isEmptyDenied: {
            type: Boolean,
            notify: true
          },

          isSomebody: {
            type: Boolean,
            notify: true
          },

          url: {
            type: Object,
            notify: true,
            value: function() {
              return window.CONFIG.restHostName + ":" + window.CONFIG.restPort + window.CONFIG.restPath +
                "namespace/?children=true&locality=true";
            },
            computed: '_url(path)'
          },

          msg: {
            type: String,
            notify: true
          },
        },

        attached: function() {
          this.isSomebody = app.$.WhoAmI.isSomebody;
        },

        _computedClass: function(isSelected) {
          var classes = 'item';
          if (isSelected) {
            classes += ' selected';
          }

          this.updateStyles();

          return classes;
        },

        _url: function(path) {
          if (this.path == null || this.path == "" || this.path == "/") {
            return window.CONFIG.restHostName + ":" + window.CONFIG.restPort +
              window.CONFIG.restPath + "namespace/?children=true&locality=true";
          } else {
            path = decodeURIComponent(this.path);
            path = path.replace(/=/g, "/");
            return window.CONFIG.restHostName + ":" + window.CONFIG.restPort + window.CONFIG.restPath +
              "namespace" + path + "/?children=true&locality=true";
          }
        },

        _computeParentPath: function(path) {
          if (this.path == null || this.path == "" || this.path == "/") {
            path = "/";
            return path;
          } else {
            path = decodeURIComponent(this.path);
            path = path.replace(/=/g, "/");
            return path + "/";
          }
        },

        _computeHeaders: function(isSomebody) {
          //For now use this for this development stage
          //	TODO: need to re-wire this function activities

          if (isSomebody == true) {
            if (sessionStorage.upauth == null || sessionStorage.upauth == "") {
              return '{"Accept":"application/json"}';
            } else {
              auth = sessionStorage.upauth;
              return '{"Accept":"application/json", "Authorization":"Basic ' + auth + '"}';
            }
          } else {
            return '{"Accept":"application/json"}';
          }
        },

        handleResponse: function(e, request) {
          //FIXME: Not the suitable solution. Error not properly handle.
          x = request.xhr.response.children;

          if (x.length == 0 || (x.length == 1 && (x[0].messages != undefined || x[0].messages != null))) {
            this.isEmptyDenied = true;
            this.hasFiles = false;

            if (x.length == 0) {
              this.msg = "Empty Directory";
            } else if (x[0].messages != undefined || x[0].messages != null) {
              this.msg = (x[0].messages).toString();
            }
          } else {

            this.isEmptyDenied = false;
            this.hasFiles = true;
          }

          Polymer.dom.flush();
          this.updateStyles();

          e.stopPropagation();
        },
      });
  </script>
</dom-module>

而index.html看起来像这样:

<!DOCTYPE html>
<html>

<head>
  <link rel="import" id="bundle" href="elements/elements.html">
</head>

<body class="fullbleed layout vertical">
  . . .
  <div class="fit">
    <view-file id="homeDir"></view-file>

  </div>
  . . .
</body>

</html>

请问我该如何解决这个问题

1 个答案:

答案 0 :(得分:0)

你可能错过了这个:

<script>
        // Load Web Components when not supported
        var webComponentsSupported = ("registerElement" in document
            && 'import' in document.createElement("link")
            && 'content' in document.createElement("template"));

        if (!webComponentsSupported) {
            var script = document.createElement("script");
            script.src = "assets/bower_components/webcomponentsjs/webcomponents-lite.js";
            document.head.appendChild(script);
            console.log("WebComponents Loaded");
        }
    </script>

您应该在加载聚合物和元素后立即将此脚本放在索引上。如果默认情况下不支持WebComponents,则此脚本将加载WebComponents。