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

一个用于在文本、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">的操作吗?