All kinda imports

Importing a script from external script:

// script.js
export const something = "foo";

// importing
import {something} from "script.js"

Importing a style from an external style, with @sheet:

// sheet.css
@sheet subsheet {
  ...
}

// importing
@import subsheet from "sheet.css";

<link rel=stylesheet href="sheet.css" sheet="subsheet">

Importing a script from an inline script:

<script id="bundle" type="module">
  export const something = "foo";
</script>

<script type="module">
  import {something} from "#bundle";
</script>

Importing a whole inline style into shadow DOM (without @sheet):

<style id="theme">
  * {
    --primary-color: rebeccapurple;
  }
</style>

<my-element>
  <template shadowrootmode=open>
    <style>
      @import "#theme";
    </style>
    <!-- or -->
    <link rel=stylesheet href="#theme">
  </template>
</my-element>

Importing a subsheet from an inline style:

<style id="bundle">
  @sheet subsheet {
   // actual style
  }
</style>

<my-element>
  <template shadowrootmode=open>
    <style>
      import subsheet from "#bundle";
    </style>
    <!-- or -->
    <link rel=stylesheet href="#bundle" sheet="subsheet">
  </template>
</my-element>

noamr/all-kinda-impots.md