/*
  Let's look at how we can give the <graphics-element> a decent look,
  but also how we can make sure that the <fallback> content only shows
  when the <graphics-element> isn't actually defined, because scripts
  are disabled (or blocked!).
*/

graphics-element {
  display: inline-block;
  border: 1px solid grey;
}

/*
  We can use the :defined pseudo-class to check whether a particular
  element is considered a "real" element (either by being a built-in
  standard HTML element, or a registered custom element) or whether it's
  just "a tag name that isn't tied to anything".

  If JS is disabled, as well as when the JS for registering our custom
  element is still loading, our <graphics-element> will just be "a word"
  and so we want to make sure to not show any content, except for the
  <fallback-image>, if there is one.

  So, first off: hide everything!
*/

graphics-element:not(:defined) > * {
  display: none;
}

/*
  And then we declare a more specific rule that does NOT hide the
  <fallback-image> element and its content.
*/

graphics-element:not(:defined) fallback-image {
  display: block;
  text-align: center;
  padding: 0.5em;
  margin: auto;
}

/*
  Normally, images are inline elements, but in our case we want it to be
  treated as a full block, so that the caption text shows up underneath
  it, rather than next to it:
*/
graphics-element:not(:defined) fallback-image > .view-source {
  display: block;
  position: relative;
  top: -0.6em;
  margin-bottom: -0.2em;
  font-size: 60%;
  color: #00000030;
}

graphics-element:not(:defined) fallback-image > label {
  display: block;
  font-style: italic;
  font-size: 0.9em;
  text-align: right;
}

graphics-element:not(:defined) fallback-image > img {
  display: block;
  border: 1px solid lightgrey;
}

/*
  Then, we say what should happen once our <graphics-element> element
  is considered a proper, registered HTML tag:
*/

graphics-element:defined {
  display: inline-block;
  padding: 0.5em;
  justify-self: center;
  font-size: revert;
  text-align: revert;
}

/*
  And of course, once that's the case we actually want to make sure that
  the <fallback-image> does NOT show anymore!
*/

graphics-element:defined fallback-image.loaded {
  display: none;
}