我克隆了stencil-component-starter来自：
https://github.com/ionic-team/stencil-component-starter
然后在文件上：my-component.tsx我有以下代码：
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@Prop() minHeartRate: number;
@Prop() maxHeartRate: number;
render() {
return (
<div>
Athlete: {this.first} {this.last} - Heart Rate Range:
<ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</div>
);
}
}
正如你在这里看到的：
[之前]它几乎可以正确渲染，但有两个问题1 and 2：
[现在]它根本没有渲染。因此，存在三个问题1, 2 and 3：
标签被
<ion-label/>忽略。每个旋钮都可以移动到另一个旋钮之外（请忽略这一点，我认为这是新版本的故意）。
这是我刚刚发现的一个新问题
(Current time: 2018-08-26 19:20)。就像 12 小时前（检查 repo 上的时间戳）存储库：https ://github.com/napolev/stencil-ion-range/提交时几乎正确地12c14b75cca92f19af6c5ccae60091319578cec7生成了上面的标签，除了问题 1 和 2（检查下面的图片） . 但是现在在干净安装此存储库之后，它不再呈现您在下图中看到的内容。这很奇怪。在完成该提交后，我检查了它在全新安装后呈现的情况。<ion-range/>
这是它之前渲染的内容，它不再被渲染：
参考：
https://ionicframework.com/docs/api/components/range/Range/
关于如何解决这个问题的任何想法？
谢谢！
[编辑 1]
这是对以下 Aaron Saunders 评论的回应：
Aaron，我添加了您建议的代码，您可以在此处看到：
但是当运行代码时：$ npm start以下是渲染的内容：
您是否正确渲染了组件？
我删除了该node_modules目录并再次安装它们，但没有成功。
你可以试试我的存储库吗？
正如你所看到的，我在官方提交的基础上只做了 2 次提交：
https://github.com/napolev/stencil-ion-range/commits/master
以防万一这是我用于主要工具的版本：
$ node -v
v8.11.2
$ npm -v
6.1.0
$ ionic -v
ionic CLI 4.1.1
[编辑 2]
这个主题有一个平行的讨论：
[编辑 3]
这是对下面Alexander Staroselsky评论的回应：
Alexander，我通过以下更改尝试了您的建议：
https://github.com/napolev/stencil-ion-range/commit/68fce2abe25536b657f9493beb1cc56e26828e4f
现在<ion-range/>组件被渲染了（这真的很好），但是渲染时出现了一些问题，如下图所示。组件的<ion-label/>宽度很大。
关于如何解决这个问题的任何想法？
谢谢！
[编辑 4]
添加来自Aaron Saunders的建议可以解决问题：
<ion-item>
<ion-range
mode="ios"
dualKnobs={true}
min={0} max={200} step={2}
pin={true} snaps={true}
value={{ lower: this.minHeartRate, upper: this.maxHeartRate }}
>
<ion-label slot="start" style={{flex: 'none', margin: '0 30px 0 0'}}>0</ion-label>
<ion-label slot="end" style={{flex: 'none', padding:' 0 0 0 30px'}}>200</ion-label>
</ion-range>
</ion-item>
感谢Alexander Staroselsky和Aaron Saunders，因为通过结合他们的建议，我可以完成这项工作。
