API consistency: new interface with a .complete property (the same as with <img>.complete), for all elements that load content.

[trusktr]

What problem are you trying to solve?

There is currently inconsistency in how to detect if an element has loaded its content, depending on what type of element we have.

For example, how do you detect if a <link> element has already loaded a style sheet?

What solutions exist today?

With <img> we can look at the .complete property:

const image = document.querySelector('img')

if (image.complete) {
  console.log('Image is already loaded');
} else {
  image.onload = () => {
    console.log('Image has loaded');
  };
}

How would you solve it?

It seems like for sake of consistency in DOM APIs, we should include the .complete property on all other elements that fire load events, f.e. <link>.

We can do this by organizing the .complete into to a new separate interface that all loading elements implement, f.e. maybe it is named LoadableElement or similar. This new interface would apply to <link>, <script>, <img>, and any other element that loads content and fires a load event.

I think this is backwards compatible.

Anything else?

While we're at it, we may as well make it easy to detect loading state changes for all loading elements too. For example, maybe these elements should also emit loadstart events like Media elements do, and have isLoading or similar properties.

This is an opportunity to create consistency in DOM element loading APIs across all elements that fire load events as ell as Media elements that have additional loadstart events, etc.

Ideally, there'd be a consistent way to observe loading state of any lodable element regardless if it loads a whole thing (such as an image) or piece of a thing over time (such as a video).

Inconsistent workarounds

For the <link> element, we can do this to achieve something similar to <img> elements:

const link = document.querySelector('link')
const linkComplete = link.sheet?.cssRules.length

if (linkComplete) {
  console.log('Link stylesheet is already loaded');
} else {
  link.onload = () => {
    console.log('Link stylesheet has loaded');
  };
}

With consistency we could do this:

const el = document.querySelector('link, img, script, etc')

if (el.complete) {
  console.log('Element is already loaded');
} else {
  el.onload = () => {
    console.log('Element has loaded');
  };
}

[annevk]

I don't think complete is good precedent to follow. I would support adding state promises, as per #127 and elsewhere.