DOM FAQ
- FOUC - flash of unstyled content
- 应用 style 时
- 参考
- Comparison of Event Targets
ShadowRoot rem & font-size
- 无法覆盖
- 导致 rem 受外部影响 - html font-size
- 可考虑使用 em
- 参考
ShadowRoot.mode
- open
- 记录 element.shadowRoot
- 受外部 style 影响
- closed
- 不会记录 root
- 如有需要需要自己使用 WeakMap 跟踪引用
shadow dom 重置 host 样式
:host {
all: initial;
}
初始化 style
// 新的方式 - 2019, Chrome 73+
var sheet = new CSSStyleSheet();
sheet.replaceSync(`.color { color: pink }`);
host.shadowRoot.adoptedStyleSheets = [sheet];
// 旧的方式
let style = document.createElement('style');
style.textContent = css;
container.appendChild(style);
a 的 download 不生效
- 如果 HTTP 有 Content-Disposition 头 则优先
- 非 same-origin download 属性无效
可以选择预先下载 base64 然后下载
<!-- same orgin -->
<a href="/wp-content/uploads/file.mp4" download="file.mp4">
<!-- pre-download -->
<a download href="data:application/octet-stream;base64,PD94ANDSOON">Download Me</a></a
>
key vs code
- key - 实际输入内容
- 用于文本输入
- 受键盘布局影响
- code - 输入的物理布局
- 用于操作控制
- 不受键盘布局影响
- 参考
key | code |
---|---|
a | KeyA |
A | KeyA |
1 | Digit1 |
! | Digit1 |
- | Minus |
Enter | Enter |
Shift | ShiftLeft |
字体检测
document.fonts.check('12px ui-serif');
- Safari 因为隐私原因,不支持,返回错误结果
监听 URL 变化
- 目前无法可靠的检测 url 变化
- patch history 的方式 https://github.com/streamich/react-use/blob/master/src/useLocation.ts
- observe 任何修改然后检测
- Chrome 102+ window.navigation 接口
let last = document.location.href;
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (last !== document.location.href) {
last = document.location.href;
/* Changed */
}
});
});
observer.observe(document.querySelector('body'), {
childList: true,
subtree: true,
});
// Chrome 102+
navigation.addEventListener('navigate', (e) => {
console.log(`navigate ->`, e.destination.url);
});