Skip to main content

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

HTML attributes vs DOM properties

  • HTML attributes
    • 可以序列化 - 在 HTML 里能表现出来
    • 所有类型都是 string - 因为序列化
    • 大小写无关
    • 访问方式不同
      • div.getAttributeNames()
      • div.getAttribute('id')
    • Reflection - property 可能会映射为 attribute
      • crossOrigin -> crossorigin
      • ariaLabel -> aria-label
      • className -> class
      • htmlFor -> for
      • ⚠️ 注意 defaultValue -> value
        • value property 没有对应的 attribute
  • DOM properties
    • 如果一个 property 反映一个 attribute,那么 attribute 为 property 的 source 值
      • 也就是说以 attribute 为准
    • 有初始值和校验逻辑