DEV Community

John Peters
John Peters

Posted on

CSS Annotations for Dynamic Styling

Consider this code:

      ...
      let css = `
           content:"21:appGrid:columns";
           display:grid;
           grid-template-columns: ${this.columns};
           grid-column-gap: ${this.columnGap};
          `;
      if(this.rows){ 
         css = `
           content: "28:appGrid:rows";
           display: grid;
           grid-template-rows: 14em 1fr;
         `;
      }
      //this is where we set style dynamically
      this.htmlElement.setAttribute("style", css);
Enter fullscreen mode Exit fullscreen mode

We are dynamically injecting a style to a particular HTMLElement. It allows us to pass in parameters etc. But what is the content: tag doing?

Did you know that content: tags are only applied to psuedo-css class elements?

We are hijacking this behavior to use the content: tag to annotate our dynamic content. The only requirement is that we don't use this with pseudo elements.

Alt Text

We now know that this dynamic style, was injected via javascript; coming from line 28: of our appGrid code, in the 'rows' part. It gives us a toehold to find the root cause of an injected style issue.

JWP2020

Top comments (0)