External Style file not loaded in polymer 3 application deployed to Spring mvc application
Asked Answered
R

0

0

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.)

Rhumb answered 4/12, 2018 at 16:59 Comment(3)
workaround is to copy all css content to the template. (inlineCss switch from polymer-cli build didn't work.)Rhumb
Could anyone help with this case. For now it seems the only option that works in deployed application is to copy css contetent to the template, which is not acceptable for production version.Rhumb
If the css files are added to host page that contains host element, the custom elemetn doesn't inherit them. They are loaded, but the table is rendered without styles. Everything is outputed in one column when deployed to mvc web app. (When it runs standalone, everything is fine.)Rhumb

© 2022 - 2024 — McMap. All rights reserved.