Как получить CSS с компонентной областью без использования отдельных файловых компонентов?

Question

Можно ли получить компонентный CSS, т.е.

<style scoped>
...
</style>

БЕЗ использования отдельных файловых компонентов?

Например, у меня есть компонент:

// MyComponent.ts

import { Vue, Component } from 'vue-property-decorator'

@Component({
  template: '<h1>Not a Single File Component</h1>'
})
export default class MyComponent extends Vue {}

Как я могу добавить стиль, такой как:

h1 {
  color: blue;
}

, но ограничить его только MyComponent.ts?

Поскольку для использования этого компонента я бы импортировал его как:

import MyComponent from './MyComponent'

, который не является отдельным файловым компонентом и не имеет <style scoped>...</style>

Answer 1

Вы можете сделать привязку стиля следующим образом:

@Component({
  template: '<h1 :style="color: blue;">Not a Single File Component</h1>'
})

В качестве альтернативы, вы можете назначить h1 идентификатор и ссылаться на идентификатор в таблице стилей.

@Component({
  template: '<h1 id="whatever-this-is">Not a Single File Component</h1>'
})

...

<style>
    #whatever-this-is {
        color: blue;
      }
</style>