0

I'm implementing a (lit-element) webcomponent that has a css-grid that's specific per instance of the element. For now I set the grid-template property by the style attribute of the element, but as the grid can become quite big this attribute is also very large and maybe reaches some limits and certainly is not nice to read/validate in the HTML. What would be the correct way to do this?

Like:

<div id="timeline" draggable="true" class="timeline year" style="grid-template: [years] &quot;dummy-group-cell _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021--- _y_2021---&quot; var(--default-height, 40px) [months] &quot;dummy-group-cell _m_2021-09 _m_2021-09 _m_2021-09 _m_2021-09 _m_2021-09 _m_2021-10 _m_2021-10 _m_2021-10 _m_2021-10 _m_2021-10 _m_2021-10 _m_2021-10&quot; var(--default-height, 32px) [data] [none] &quot;none - - - - - - - - - - - -&quot; var(--default-height, 60px) [none] &quot;none - - - - - - - - - - - -&quot; var(--default-height, 60px) [none] &quot;none - - - - - - - - - - - -&quot; var(--default-height, 60px) [none] &quot;none - - - - - - - - - - - -&quot; var(--default-height, 60px) [none] &quot;none - - - - - - - - - - - -&quot; var(--default-height, 60px) [footer] &quot;none - - - - - - - - - - - -&quot; 1fr [end] / [group] auto [_1635285600000] var(--width) [_1635372000000] var(--width) [_1635458400000] var(--width) [_1635544800000] var(--width) [_1635631200000] var(--width) [_1635721200000] var(--width) [_1635807600000] var(--width) [_1635894000000] var(--width) [_1635980400000] var(--width) [_1636066800000] var(--width) [_1636153200000] var(--width) [_1636239600000] var(--width) ;">
   ...
</div>

<html>
  <body>
    <script src="https://unpkg.com/@webcomponents/shadycss/scoping-shim.min.js"></script>
    <script type="module">
      import {LitElement, html} from 'https://unpkg.com/@polymer/[email protected]/lit-element.js?module';

      import 'https://unpkg.com/@polymer/[email protected]/paper-button.js?module';

      class MyElement extends LitElement {
              
        static properties = {
          color: {type: String}
        };   
      
        firstUpdated(changedProperties) {
          super.firstUpdated(changedProperties);

          // todo: fix @apply https://github.com/Polymer/lit-html/issues/518
          window.ShadyCSS.styleSubtree(this);
        }
      
        render() {
          return html`
            <style>
              :host {
                --paper-button: {
                  background: ${this.color};
                }
              }
            </style>
            <paper-button style="color:${this.color}">Button</paper-button>
          `;
        }
      }

      customElements.define('my-element', MyElement);
    </script>

    <my-element color="green"></my-element>
    <my-element color="red"></my-element>
  </body>
</html>

Improve this question
7
  • Would you mind explaining a bit more why you decided to set the grid styles like that rather than using a CSS selector or something? Commented Nov 10, 2021 at 5:30
  • Thanks for the response Alan. Because lit-element uses shadyCSS and this is documented here: lit-element.polymer-project.org/guide/… But, maybe I could use the strategy described there to create a separate style per instance (as my grid is different per instance as it depends on the config of the webcomponent). Commented Nov 10, 2021 at 9:30
  • @AlanDávalos: added a code snippet to demonstrate the shadyCSS issue with <style> tags in inside a shadow dom. The template will not be rendered per instance, the inline style is. Commented Nov 10, 2021 at 10:09
  • Thanks for adding the snippet, that gives some context to this, I'm guessing that you are using the Shadow DOM polyfill for either paper-* elements compatibility or IE support? Is there any chance you could use any more recent implementation of material? Commented Nov 11, 2021 at 4:19
  • 1
    You are definitely using a very old version. see for newer versions lit.dev/docs/components/styles Commented Jan 13, 2022 at 16:33
Related questions
4
HTML Grid Layout
1
CSS grid highlighting
3
Grid style layout
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.