我什至不确定这在技术上是否可行，更不用说建议了，但我想我会问。
是否可以在 stenciljs @Component 装饰器中使用变量或函数的结果？
我想做的是使用 fetch 从 CDN 获取样式表，然后将其应用到我的组件。 我知道有几种不同的方法可以做到这一点，并且我开始想知道这是否可能。 我的猜测是事实并非如此。 我在想类似的事情：
@Component( {
tag: 'my-component',
styles: await getMyStylesheet(),
shadow: true
} )
其中 getMyStylesheet() 是一个类似以下的函数：
public async getMyStylesheet(): Response<string> {
const r = await fetch('https://my.cdn/file.css');
const data = await r.text();
return Promise.resolve(data ?? '');
}
甚至不确定该函数将位于何处。不在我的组件的类中或在装饰器之前。 也许在另一个文件中并导入???
事实上，我只是使用
@State() myCSS = '';
async componentWillLoad(): Promise<boolean> {
const r = await fetch('https://my.cdn/file.css');
const data = await r.text();
this.myCSS = data ?? '';
return Promise.resolve(true);
}
render() {
return (
<style>{this.myCSS}</style>
)
}
这似乎运作良好。 但我很好奇并认为有人可能肯定知道。
我认为最好的方法是从index.html导入样式表：
<head>
<title>Your App</title>
<link rel="stylesheet" href="https://my.cdn/file.css" />
</head>
如果您希望它特定于您的组件或者您无权访问根 html，您可以在渲染函数中以这种方式添加它：
render() {
return (
<div>
<link rel="stylesheet" href="https://my.cdn/file.css" />
<p>Your component content goes here</p>
</div>
);
}