Search code examples
cssdomcssom

Is Inline Styling Part of the CSSOM or the DOM?

I'm trying to understand the relationship between inline styles and the CSS Object Model (CSSOM) in a web document. Specifically, I want to know if inline styles applied directly to an element (either via HTML style attributes or JavaScript's element.style) are part of the CSSOM or handled by the DOM.

Inline styles are applied directly to an element, like this:

<div style="color: blue; font-size: 20px;">This text is styled with inline CSS.</div>

or using JavaScript:

const element = document.getElementById("myElement");
element.style.color = "blue";
element.style.fontSize = "20px";

My question is:

  • Do these inline styles become part of the CSSOM or are they stored separately within the DOM?
  • Are inline styles accessible via CSSOM APIs like document.styleSheets or only through the style property of the element?
  • Is there any authoritative source (specification, documentation) that clearly explains this distinction?

My understanding is:

  • Inline styles are not included in the CCSOM.
  • CSSOM does include all the css rules included in all external stylesheets (<link>), internal styles (<style> tags) and dynamically added rules using JavaScript (e.g., insertRule()). It does not filter them out and it is not its responsibility to emerge the winner with the highest precedence. It simply attaches all the corresponding css properties to the appropriate tree nodes, even the conflicting ones.
  • The browser applies the cascade rule taking into account the DOM and the CSSOM. The final computed value for every css property and for every element is knowledge that belongs only to the DOM and CSSOM is not aware of.

Do you think I am wrong or correct? I've seen conflicting explanations, and I’d like to get a concrete answer with references if possible. Any clarification on whether inline styling is officially considered part of the CSSOM or just contributes to the computed styles would be helpful.

Solution

  • The spec for the style attribute clearly lays out

    The style IDL attribute is defined in CSS Object Model. [CSSOM]

    In can be found in chapter 7 DOM Access to CSS Declaration Blocks therein.