跳到主要内容

DOM FAQ

ShadowRoot rem & font-size​

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​

keycode
aKeyA
AKeyA
1Digit1
!Digit1
-Minus
EnterEnter
ShiftShiftLeft

字体检测​

document.fonts.check('12px ui-serif');
  • Safari 因为隐私原因，不支持，返回错误结果

监听 URL 变化​

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);
});

The target origin provided does not match the recipient window's origin​

idle​

tabIndex​

  • tabIndex=0
    • Tabbable and focusable
  • tabIndex=-1
    • Not tabbable, but focusable