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
Top comments (0)