CSS example targeting html which does not exist in shadow root

[e111077]

Heya, the example here doesn't seem to be green because it is selecting html but the example is in a shadow root. Not sure if that's intentional as the following text says it should have 'cornflowerblue' as a bg

https://github.com/modernweb-dev/web/blob/ebe2cef0657e27b69d120fe67d0dd272b3b99ef2/docs/guides/going-buildless/css.md#L59

https://modern-web.dev/guides/going-buildless/css/

[daKmoR]

@bennypowers we probably should check this example... maybe we can make it "simpler" and/or easier to follow 🤔

[bennypowers]

@e111077 correctly identified the problem: I selected for html instead of :host, being that this is all rendered in the shadow root of an <mdjs-preview>.

this css should fix it. I'll send in a PR sometime this week.

:host {
  --my-background-color: green;
  --my-font-size: 12px;
}

article p {
  --my-font-size: 24px;
  --my-background-color: cornflowerblue;
  --p-padding-horizontal: 12px;
}

p {
  display: inline-block;
  border-radius: 4px;
  padding: 4px var(--p-padding-horizontal,6px);
  background-color: var(--my-background-color);
  font-size: var(--my-font-size);
}