每周平台新闻：CSS ::marker 伪元素、Web Components 预渲染、在你的网站上添加 Webmention

Šime 在 webplatform.news 上定期发布面向 Web 开发人员的内容。

在本周的综述中：日期选择器给键盘用户带来了困扰，一个新的 Web Components 编译器有助于解决 FOUC 问题，我们终于可以使用样式化列表项标记了，以及在你的网站上添加 Webmentions 的四个步骤。

使用纯文本字段进行日期输入

键盘用户更喜欢常规文本字段而不是复杂的日期选择器，语音用户对原生控件 (<input type="date">) 感到沮丧。

以前，我依赖于纯文本输入作为日期字段，并使用自定义验证来进行网站验证，通常在客户端和服务器端使用相同的逻辑。对于已知日期——生日、节日、纪念日等——测试效果良好。

(来自 Adrian Roselli)

Web Components 预渲染

Stencil 是一个“Web Components 编译器”，可用于预渲染 Web Components（包括 Shadow DOM）或将其隐藏，直到它们完全设置样式以避免未设置样式内容的闪烁 (FOUC）。

此工具还可以确保仅在需要时加载 polyfill，并且其组件 API 包含有助于简化 Web Components 编写的有用装饰器和钩子（例如，Prop 装饰器处理属性更改）。

import { Component, Prop, h } from "@stencil/core";

@Component({
  tag: "my-component"
})
export class MyComponent {
  @Prop() age: number = 0;

  render() {
    return <div>I am {this.age} years old</div>;
  }
}

(来自 Max Lynch)

CSS ::marker 伪元素

当 CSS display: list-item 声明应用于元素时，该元素会生成一个包含标记的标记框，例如列表项目符号 (<li> 和 <summary> 元素默认具有标记)。

可以使用 ::marker 伪元素来设置标记的样式（用于更改标记的颜色或字体），但此 CSS 功能目前仅在 Firefox 中受支持。

(来自 Rachel Andrew)

在你的网站上添加 Webmention

1. 在 Webmention.io 上注册；这是一项代表你收集 Webmentions 的服务。
2. 将 <link rel="webmention">（带有适当的 href 值）添加到你的网页。

   如果你更喜欢基于你的 CMS 进行构建，则所有主要内容管理系统 (CMS) 也都提供了 Webmention 插件。

3. 从 Webmention.io（通过 Ajax）获取 Webmentions 以在你的页面上显示它们。
4. 使用 webmention.app 自动发送 Webmentions（当你发布包含指向其他支持 Webmention 的网站的链接的内容时）。

(来自 Daniel Aleksandersen)