一个用于在文本、HTML和Markdown之间交换文本的Web组件 - Chris Coyier

在这个网站的几次重新排列之前，我的“个人简介”（关于我自己的一些文字）上有一些交互控件。你可以在以下选项之间进行切换：

• 简短、中等和长
• 第一人称和第三人称
• 文本、HTML和Markdown

这个大胆的想法是在有人要求我提供这个功能时，比如在采访中或者在会议上介绍自己，可以自助选择。你永远不知道他们希望以什么格式，有什么长度限制，或者要用什么时态。所以我选择了全部都做！

你可能会认为我会做一些聪明的事情来让它工作，对吗？

但事实并非如此。

这就是为什么我没有了它。我单独创建了每个可能的组合（3 × 2 × 3 = 18），然后根据单选输入值的组合进行切换。编辑个人简介太困难了。

不过，它难道不能自动化吗？我一直认为“输出类型”是最容易的部分。所以其他部分应该能够自动化吧。 嘿，我围绕这个问题尝试了一下，到了这一步：

我将其制作成一个名为<bio-machine>的Web组件，以便在需要时可以移植。除了这个Pen之外，它没有在任何地方发布，所以你不能只是导入和使用它，但也许将来可以。它需要进一步完善。

这个想法是你只需要提供Markdown，其他格式会自动创建并添加控件。

<bio-machine>
<div># 你好，世界！

我是Chris。</div>
</bio-machine>代码语言：HTML，XML (xml)

你在那里看到的所有其他代码只是设置Web组件。

我使用了Tram-Lite (opens new window)的测试版本 (opens new window)。我喜欢它完全不需要构建步骤，整个组件都在一个大的HTML块中实例化的想法。最终，我需要Tram-Lite的创建者Jesse Jurman (opens new window)的帮助，因为他们在v4中内置的事件绑定功能对于单选按钮控件来说太复杂了。 以下是有关整体体验的注意事项：

• 无法简单地使用this.innerText来获取来自Light DOM的所有文本。需要注意的是，使用笨拙的<div>包装器，以便使用this.querySelector("div").innerText。感觉应该有更好的方法。
• 我不知道Tram-Lite是否适合将组件打包并让人们从CDN导入和使用，就像许多其他Web组件一样。我喜欢它的HTML焦点。这种未来语法是否是关于这种类型的语法？import { MyComponent } from "./component.html" with { type: 'html' };老实说我不知道。
• 我也无法在Tram-Lite中使用<script type="module">，因此其他依赖项（Markdown转换器、语法高亮器等）必须是全局脚本，而不是导入的脚本。再次强调，我喜欢Tram-Lite的方法和理念，但使用Lit (opens new window)或其他更合适。 以下是Markdown的翻译：

• 如何允许样式进入？当然，我可以使用::part等来设置主要的背景和文本颜色，但无法为每个链接设置为部分，这样做也是荒谬的。并且无法使用类似于::part(bio) a的方式，因为无法使用级联，这是不可行的。所以你需要通过--link-color自定义属性来传递，这是可以的，但这可能会混搭样式的方法，感觉有些愚蠢。
• 关于更改内容，我可能没有正确地处理可访问性。对于个人简介区域，我应该做类似于<div role="region" aria-live="polite">的操作吗？