0

样式在模板中加载：

    static get template() {
        return html`
      <style>

        :host {
          display: block;
          border: double;
          background-color: lightsteelblue;
        }
      </style>

      <iron-ajax auto url="http://localhost:8000/api/clients" handle-as="json" last-response="{{_getClientsResponse}}"></iron-ajax>

      <h2>Hello [[prop1]]!</h2>
      <div>host</div>

     <link rel="stylesheet" href= "/node_modules/ag-grid-community/dist/styles/ag-grid.css">
     <link rel="stylesheet" href= "/node_modules/ag-grid-community/dist/styles/ag-theme-blue.css">

     <div class="test-header">
        Page Size:
        <select on-change="onPageSizeChanged" on-scroll="passive" id="page-size">
            <option value="5" selected>5</option>
            <option value="10" selected>10</option>
            <option value="15" selected>15</option>
            <option value="20" selected>20</option>
            <option value="100">100</option>
            <option value="500">500</option>
            <option value="1000">1000</option>
        </select>
    </div> 

     <ag-grid-polymer 
                        style="width: 90%;height: 600px;" 
                      class="ag-theme-blue"
                      gridOptions="{{gridOptions}}"
                      rowData="{{_getClientsResponse.values}}"
                      paginationAutoPageSize="true"
                      pagination="true"
                      enableSorting 
                      enableFilter
                      components="{{components}}"
                      enableColResize
                      suppressAutoSize
                      on-first-data-rendered="{{firstDataRendered}}"
                      minRowsToShow ="5"                      
     ></ag-grid-polymer>     
   `

使用正确的基本 url 完成构建，该基本 url 已部署并加载所有其他库。

为自定义组件加载外部样式文件的替代方法是什么？

==
更新 01：模板中的样式正在尝试从： http://myHost/context/node_modules/ag-grid-community/dist/styles/ag-grid.css加载失败，因为资源不在该路径上。如果为浏览器提供了正确的网址：http://myHost/context/resource/polymer/node_modules/ag-grid-community/dist/styles/ag-grid.css css 文件已加载。同时在 index.html 中成功加载了聚合物模块，例如：<script type=module src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

（此案例可能与https://stackoverflow.com/posts/comments/94099895?noredirect=1有关，但我想关注 Polymer 3 案例。）

4

0 回答 0