Refactor styles and shadowRootOptions to use getter syntax

[joe-bethke]

Fixes #225

static initialization blocks are not supported by Safari 15.6

I ran npm run lint -- -f before committing, and I see that it moved these static property declarations around in the classes, I'm not sure if that's desired.

[motss]

@joe-bethke Thanks for raising a PR. This is definitely one of the ways to fix the issue.

There's another easier way to fix the issue. Just add target: 'ES2021' in tsconfig.json.

[joe-bethke]

@motss that does indeed fix this for me when I'm using the demo app in this repo. But, I'm not sure how to achieve the same thing in my own application. I've got a minimal example of the problem recreated in my own repo. It doesn't seem like setting "target": "es2021" works the same when building an application that imports the component. Do you have any idea what I might be doing wrong in my own application that is causing this to not to make a compatible build?

[motss]

@joe-bethke Thanks for sharing a reduced test case. For that to work with web-dev-server, you will need the @web/dev-server-esbuild plugin. Just install it as devDependency then update your config.

import { esbuildPlugin } from '@web/dev-server-esbuild';

export default {
  open: true,
  watch: true,
  appIndex: "index.html",
  plugins: [
    esbuildPlugin({
      json: true,
      ts: true,
      target: 'es2021'
    }),
  ],
  nodeResolve: {
    exportConditions: ["development"],
  },
  port: 3030,
};

Hope this helps.

[joe-bethke]

@motss that does help! It sounds like this PR isn't necessary. I'm going to close it.