我认为看到 谷歌 发布一些有趣的 Web Components 代码库是一件很酷的事情。它展示了酷炫的新 Web 功能的可能性，并允许他们以完全兼容 Web 标准的方式发布这些功能。
这里有一个：<two-up>
我想尝试一下，所以我在一个 Pen 中链接了他们的示例 two-up-min.js 脚本，并单独使用了该元素来查看它的工作原理。他们使用自定义属性公开组件的样式，我认为这对自定义属性来说是一个非常好的用例。
<two-up&rt; 由 Chris Coyier (@chriscoyier) 在 CodePen 上创建。
代码太丑了，我希望我永远不必为真实的生产网站编写或维护这样的代码
详细说明？
对你来说，丑陋的地方是哪里？
抱歉，我应该更具体一些。用法很棒，我对此非常满意。是实现代码本身，特别是 two-up.ts。
我已经习惯了使用 JSX 来编写 Vue 和 React 以及 Angular（其中 DOM 操作代码很少），现在这段代码对我来说看起来很陌生。不得不将子元素附加到元素上、设置和删除属性、将元素插入 DOM、不得不调用
addEventListener以及可能需要调用removeEventListener，现在对我来说感觉太笨拙了。我想我被当今的框架宠坏了。嗯，在 Edge 中没有任何作用……但在 Chrome 中很不错。
我想知道还要多久？微软是否说明了 Chromium 切换何时发布？
https://github.com/GoogleChromeLabs/two-up#attributes
“启用 Edge 支持的布尔属性。”
不。键盘。友好。
#a11y #EnuffSaid
你是说 Web Components 不够键盘友好吗？我 99% 确定这不是真的。我相当肯定你必须像其他任何东西一样小心处理它。Marcy Sutton 有一个关于 Web Components 和可访问性的演示文稿。
或者你是指这个特定的演示？如果是这样，这是一个非常有趣的情况。我想知道像这样的滑块将如何工作。也许是焦点样式，然后使用左右方向键来移动它？或者这会覆盖其他可访问性控件？无论如何，它都是开源的，所以我相信他们会欢迎任何帮助它的提交或在问题中进行讨论。
嗨，Chris - 是的，我的意思是这个特定的组件。
方向键可以工作。但为了简单起见，也许可以将它们绑定，以便在任一方向上的单个交互都显示整个图像。并且可能明智地使用
aria-hidden: true为屏幕阅读器禁用该功能？一个很棒的想法，但看起来真的很丑。阴影使它看起来“模糊”，并且由于某种原因，该条在照片下方延伸了几像素，无论我多么努力地尝试，都无法在检查器中修复它。你可能认为这不是一个大问题，但它突出了使用这种具有有限样式选项的“黑盒”组件的问题。
也许我遗漏了什么，但此 HTML 在 HTML5 中无法验证，那么它如何“兼容……Web 标准”？
Web Components 实际上是 Web 标准：https://github.com/w3c/webcomponents
如果您使用了一些使之无效的验证器，那么 1) 它无关紧要 2) 它是不正确的