Shadow DOM 样式 Stylus 改不了？只能用 JavaScript 了

编程 · 捣鼓
1

作为 stylus 的重度用户，一眼不合就改页面样式是家常便饭，结果今天在 app.follow.is 翻车了，中文页面引用居然用反人类的斜体，Stylus 还完全无解……

只能召唤 AI 了，经过几轮的搬运才明白，不是 Stylus 不给力，是 Shadow DOM 太狡猾。
没有 exportparts 的 Shadow DOM 基本算是样式隔离了，CSS 覆盖无效。
那只能不客气不怕麻烦的使用 Tampermonkey 了……继续施法召唤——收工

// ==UserScript==
// @name         Unitalicize Blockquotes in Shadow DOM
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动取消 follow.is 页面中 Shadow DOM 内 blockquote 的斜体样式
// @match        https://app.follow.is/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function fixQuotes() {
    document.querySelectorAll('*').forEach(el => {
      if (el.shadowRoot) {
        el.shadowRoot.querySelectorAll('blockquote').forEach(bq => {
          bq.style.setProperty('font-style', 'normal', 'important');
          bq.style.setProperty('font-weight', 'normal', 'important');
        });
      }
    });
  }

  fixQuotes(); // 初始运行一次

  const observer = new MutationObserver(mutations => {
    for (const m of mutations) {
      for (const node of m.addedNodes) {
        if (node.nodeType === 1 && node.shadowRoot) {
          fixQuotes();
        }
      }
    }
  });

  observer.observe(document, {
    subtree: true,
    childList: true
  });
})();