Disallow arbitrary functions to be treated as stylesheets

[nolanlawson]

Related to #2826, it is possible to render whatever dynamic CSS you want by using this hack:

export default class extends LightningElement {
  render() {
    template.stylesheets = [() => 'h1 { color: red; background: green; }']
    template.stylesheetToken = 'foo'
    return template
  }
}

Demo

Ideally, we should lock down stylesheets to disallow this. We could use the same mechanism we currently use for templates (registerTemplate) and components (registerComponent). E.g. we could have a registerStylesheet to sign the stylesheet functions.

Note that this wouldn't remove any capabilities that aren't already exposed. You can just inject your own stylesheets manually, e.g. by adding <style> tags, modifying adoptedStyleSheets, etc.

[nolanlawson]

We would also have to be careful with the rollout, since this may have backwards compat impliciations.

[git2gus]

This issue has been linked to a new work item: W-11939723

[nolanlawson]

Superseded by #3447