External Style file not loaded in polymer 3 applic

2019-08-23 05:06发布

问题:

Styles are loaded in template:

    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>     
   `

Build is done with correct base url, which is deployed and all other libs are loaded.

What would be an alternative to load external styles file for custom component?

==
Update 01: Styles from template are attempting to load from: http://myHost/context/node_modules/ag-grid-community/dist/styles/ag-grid.css this fails since resource is not on that path. If correct web address is given to browser: http://myHost/context/resource/polymer/node_modules/ag-grid-community/dist/styles/ag-grid.css css file is loaded. At the same time polymer modules are successfully loaded in index.html, e.g.: <script type=module src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

(This case could be related to https://stackoverflow.com/posts/comments/94099895?noredirect=1 but I'd like to focus on Polymer 3 case.)