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

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.

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