{"id":7519,"date":"2025-09-30T01:17:26","date_gmt":"2025-09-30T01:17:26","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=7519"},"modified":"2025-09-30T01:17:26","modified_gmt":"2025-09-30T01:17:26","slug":"%e3%80%8c%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89%e3%82%ab%e3%83%b3%e3%83%95%e3%82%a1%e3%83%ac%e3%83%b3%e3%82%b9%e5%8c%97%e6%b5%b7%e9%81%932025%e3%80%8d%e3%81%a7%e5%ae%9f","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/7519\/","title":{"rendered":"\u300c\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9\u5317\u6d77\u90532025\u300d\u3067\u5b9f\u65bd\u3057\u305f\u30af\u30a4\u30ba\u306e\u4e2d\u8eab\u3092\u5927\u516c\u958b\uff01 – Techtouch Developers Blog"},"content":{"rendered":"\n<\/p>\n
\n

\"\"<\/span><\/p>\n

2025\u5e749\u67086\u65e5\uff08\u571f\uff09\u306b\u5317\u6d77\u9053\u672d\u5e4c\u5e02\u3067\u958b\u50ac\u3055\u308c\u305f
\u300c\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9\u5317\u6d77\u90532025<\/a>\u300d\u306b\u3001\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u306f\u30b4\u30fc\u30eb\u30c9\u30b9\u30dd\u30f3\u30b5\u30fc\u3068\u3057\u3066\u5354\u8cdb\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u5f53\u65e5\u306f\u30b9\u30dd\u30f3\u30b5\u30fc\u30d6\u30fc\u30b9\u3092\u51fa\u5c55\u3057\u3001\u6765\u5834\u8005\u3092\u5bfe\u8c61\u306b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u6280\u8853\u306b\u95a2\u3059\u308b\u30af\u30a4\u30ba\u3092\u5b9f\u65bd\u3057\u307e\u3057\u305f\u3002\u6280\u8853\u7cfb\u30a4\u30d9\u30f3\u30c8\u3067\u306e\u30d6\u30fc\u30b9\u51fa\u5c55\u306f\u3001\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u3068\u3057\u3066\u521d\u306e\u8a66\u307f\u3067\u3059\ud83c\udf1f<\/p>\n

\u672c\u8a18\u4e8b\u3067\u306f\u3001\u30d6\u30fc\u30b9\u4f01\u753b\u3092\u62c5\u5f53\u3057\u305f tsune\u3001aki\u3001shoko \u304b\u3089\u3001\u30af\u30a4\u30ba\u306e\u5185\u5bb9\u3084\u7d50\u679c\u3092\u30ec\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n

\"\"<\/span>
\u5f53\u65e5\u306e\u30d6\u30fc\u30b9\u306e\u69d8\u5b50\uff08\u5de6\uff1a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a8\u30f3\u30b8\u30cb\u30a2\u306e tsune\u3001\u53f3\uff1a\u30d7\u30ed\u30c0\u30af\u30c8\u30aa\u30fc\u30ca\u30fc\u306e kuni\uff09<\/figcaption><\/figure>\n<\/p>\n

\u30d6\u30fc\u30b9\u4f01\u753b\uff1a\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30af\u30a4\u30ba<\/h2>\n

\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u306e\u30d6\u30fc\u30b9\u3067\u306f\u3001\u6765\u5834\u8005\u304c\u53c2\u52a0\u3067\u304d\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30af\u30a4\u30ba\u3092\u5b9f\u65bd\u3057\u307e\u3057\u305f\u3002<\/p>\n

\"Shadow<\/span>
\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30af\u30a4\u30ba\u306e\u30af\u30a4\u30ba\u753b\u9762<\/figcaption><\/figure>\n<\/p>\n

Shadow DOM\u30fb\u30d6\u30e9\u30a6\u30b6 API\u30fbChrome \u62e1\u5f35\u6a5f\u80fd\u306a\u3069\u3001\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u6df1\u304f\u95a2\u308f\u308b\u9818\u57df\u3092\u984c\u6750\u306b\u3057\u305f\u30af\u30a4\u30ba\u3067\u3059\u3002
\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u306f\u65e2\u5b58\u306e\u3042\u3089\u3086\u308bWeb\u30b5\u30fc\u30d3\u30b9\u4e0a\u3067\u52d5\u4f5c\u3059\u308b\u305f\u3081\u3001\u30d7\u30ed\u30c0\u30af\u30c8\u958b\u767a\u306b\u304a\u3044\u3066DOM \u64cd\u4f5c\u3084\u30d6\u30e9\u30a6\u30b6 API \u3092\u6271\u3046\u5834\u9762\u304c\u591a\u3005\u3042\u308a\u307e\u3059\u3002
\u53c2\u52a0\u8005\u306e\u307f\u306a\u3055\u3093\u306b\u300c\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u3067\u306f\u3053\u3093\u306a\u6280\u8853\u3092\u4f7f\u3063\u3066\u3044\u308b\u3093\u3060\uff01\u300d\u3068\u77e5\u3063\u3066\u3082\u3089\u3046\u3053\u3068\u3092\u76ee\u7684\u3068\u3057\u3066\u554f\u984c\u3092\u9078\u5b9a\u3057\u307e\u3057\u305f\ud83d\udca1<\/p>\n

\u30af\u30a4\u30ba\u6210\u7e3e\u30b5\u30de\u30ea\u30fc<\/h2>\n

\u4eca\u56de\u306e\u30af\u30a4\u30ba\u306b\u306f\u300164\u540d\u306e\u65b9\u304c\u53c2\u52a0\u3057\u3066\u304f\u308c\u307e\u3057\u305f\uff01<\/p>\n

\u30af\u30a4\u30ba\u7d50\u679c\u306f\u3053\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n

\n\n\n\n\n\n\n\n\n\n
\u30b9\u30b3\u30a2 <\/th>\n \u4eba\u6570 <\/th>\n<\/tr>\n<\/thead>\n
\u5168\u554f\u6b63\u89e3 <\/td>\n 0 <\/td>\n<\/tr>\n
4\u554f <\/td>\n 3 <\/td>\n<\/tr>\n
3\u554f <\/td>\n 6 <\/td>\n<\/tr>\n
2\u554f <\/td>\n 20 <\/td>\n<\/tr>\n
1\u554f <\/td>\n 23 <\/td>\n<\/tr>\n
0\u554f <\/td>\n 12 <\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n

\u5e73\u5747\u6b63\u89e3\u6570\u306f1.45\u554f\uff08\u51685\u554f\uff09\u3002\u6700\u96e3\u95a2\u306f Shadow DOM \u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u3067\u3001\u6b63\u7b54\u7387\u306f14%\u3067\u3057\u305f\u3002
DOM \u3084\u30d6\u30e9\u30a6\u30b6\u306e\u6319\u52d5\u306b\u8e0f\u307f\u8fbc\u3093\u3060\u30de\u30cb\u30a2\u30c3\u30af\u306a\u554f\u984c\u3092\u4e2d\u5fc3\u306b\u3057\u305f\u305f\u3081\u3001\u53c2\u52a0\u8005\u306e\u591a\u304f\u306f1\u554f\u6b63\u89e3\u306b\u7559\u307e\u308a\u5168\u554f\u6b63\u89e3\u8005\u306f\u30bc\u30ed\u3068\u3044\u3046\u7d50\u679c\u3067\u3057\u305f\u304c\u3001\u53c2\u52a0\u8005\u306e\u307f\u306a\u3055\u3093\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u5965\u6df1\u3055\u3092\u5206\u304b\u3061\u5408\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002
\u3054\u53c2\u52a0\u3044\u305f\u3060\u3044\u305f\u307f\u306a\u3055\u307e\u3001\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n

\u6b21\u306e\u7ae0\u3067\u3001\u5f53\u65e5\u51fa\u984c\u3057\u305f\u30af\u30a4\u30ba\u3092\u5168\u554f\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002
\u51685\u554f\u306e\u30af\u30a4\u30ba\u3092\u901a\u3057\u3066\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u96f0\u56f2\u6c17\u3092\u611f\u3058\u3066\u3082\u3089\u3048\u305f\u3089\u5b09\u3057\u3044\u3067\u3059\ud83d\ude4c<\/p>\n

\u554f\u984c\u3068\u89e3\u8aac<\/h2>\n

\u3053\u306e\u7ae0\u3067\u306f\u5b9f\u969b\u306b\u4f1a\u5834\u3067\u51fa\u984c\u3055\u308c\u305f\u30af\u30a4\u30ba\u3068\u305d\u306e\u89e3\u8aac\u3092\u3057\u307e\u3059\u3002
\u5404\u554f\u984c\u3054\u3068\u306b \u2460\u554f\u3044 \u2461\u30d2\u30f3\u30c8 \u2462\u56de\u7b54 \u2463\u89e3\u8aac\u306e\u9806\u756a\u306b\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u305c\u3072\u30c1\u30e3\u30ec\u30f3\u30b8\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\ud83d\udcaa<\/p>\n

\u305d\u308c\u3067\u306f\u30b9\u30bf\u30fc\u30c8\u3067\u3059\uff01<\/p>\n

.<\/p>\n

.<\/p>\n

.<\/p>\n

Q1. document.elementsFromPoint() \u306e\u7d50\u679c\u306b\u542b\u307e\u308c\u308b\u8981\u7d20\u306f\u6b21\u306e\u3046\u3061\u3069\u308c\uff1f<\/h3>\n
    \n
  1. pointer-events: none \u306e\u8981\u7d20<\/li>\n
  2. display: none \u306e\u8981\u7d20<\/li>\n
  3. opacity: 0 \u306e\u8981\u7d20<\/li>\n
  4. visibility: hidden \u306e\u8981\u7d20<\/li>\n<\/ol>\n
    \n\u30d2\u30f3\u30c8\ud83d\udca1<\/summary>\n<\/details>\n

    \u300c\u63cf\u753b\u3055\u308c\u3066\u3044\u308b\u304b\u300d\u300c\u30d2\u30c3\u30c8\u30c6\u30b9\u30c8\u306e\u5bfe\u8c61\u304b\u300d\u306e2\u8ef8\u3067\u8003\u3048\u308b\u3068\u6574\u7406\u3057\u3084\u3059\u3044\u304b\u3082\uff01\n<\/p>\n

    \n\u6b63\u89e3\u3068\u89e3\u8aac\ud83d\udcdd<\/summary>\n<\/details>\n

    \u6b63\u89e3\u306f\u2026\u300c3. opacity: 0 \u306e\u8981\u7d20\u300d\u3067\u3059\uff01<\/p>\n

    \u89e3\u8aac:
    elementsFromPoint \u306f\u6307\u5b9a\u3055\u308c\u305f\u5ea7\u6a19\u306b\u3042\u308b\u3059\u3079\u3066\u306e\u30d2\u30c3\u30c8\u30c6\u30b9\u30c8\u3092\u901a\u904e\u3057\u305f\u8981\u7d20\u3092\u914d\u5217\u3067\u53d6\u5f97\u3059\u308bAPI\u3067\u3059\u3002<\/p>\n

    \u5404\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u52d5\u4f5c\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u308b\u305f\u3081\u3001\u6b63\u89e3\u306fopacity: 0 \u306e\u8981\u7d20<\/code> \u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

      \n
    • display: none<\/code>\u00a0\u2026 \u30ec\u30a4\u30a2\u30a6\u30c8\u304b\u3089\u9664\u53bb\u3055\u308c\u30d2\u30c3\u30c8\u30c6\u30b9\u30c8\u5bfe\u8c61\u5916<\/li>\n
    • visibility: hidden<\/code>\u00a0\u2026 \u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u5b58\u5728\u3059\u308b\u304c\u30d2\u30c3\u30c8\u30c6\u30b9\u30c8\u3067\u4e0d\u53ef\u8996\u6271\u3044<\/li>\n
    • pointer-events: none<\/code>\u00a0\u2026 \u30d2\u30c3\u30c8\u30c6\u30b9\u30c8\u3092\u30b9\u30ad\u30c3\u30d7\u3059\u308b<\/li>\n
    • opacity: 0<\/code>\u00a0\u2026 \u900f\u660e\u3067\u3082\u30ec\u30a4\u30a2\u30a6\u30c8\u4e0a\u306f\u5b58\u5728<\/strong>\u3057\u30d2\u30c3\u30c8\u30c6\u30b9\u30c8\u5bfe\u8c61\n<\/li>\n<\/ul>\n

      Q2. delete Date.prototype.toJSON \u3057\u305f\u5f8c\u306b JSON.stringify(new Date()) \u3092\u5b9f\u884c\u3057\u305f\u7d50\u679c\u306f\uff1f<\/h3>\n
        \n
      1. ‘(\u73fe\u5728\u6642\u523b)\u2019<\/li>\n
      2. ‘{}\u2019<\/li>\n
      3. \u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b<\/li>\n
      4. undefined<\/li>\n<\/ol>\n
        \n\u30d2\u30f3\u30c8\ud83d\udca1<\/summary>\n<\/details>\n

        JSON.stringify \u306f\u5bfe\u8c61\u306b toJSON \u304c\u3042\u308c\u3070\u305d\u308c\u3092\u512a\u5148\u3057\u3066\u547c\u3076\u3093\u3060\uff01\n<\/p>\n

        \n\u6b63\u89e3\u3068\u89e3\u8aac\ud83d\udcdd<\/summary>\n<\/details>\n

        \u6b63\u89e3\u306f\u2026\u300c2. ‘{}\u2019\u300d\u3067\u3059\uff01<\/p>\n

        \u89e3\u8aac:
        JSON.stringify()<\/code>\u00a0\u306f\u00a0toJSON<\/code>\u00a0\u304c\u3042\u308c\u3070\u512a\u5148\u7684\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002
        Date \u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u306f\u6587\u5b57\u5217\u3092\u8fd4\u3059\u00a0toJSON()<\/code>\u00a0\u304c\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059\u3002
        \u305d\u306e\u305f\u3081\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<\/p>\n

        JSON<\/span>.stringify<\/span>(new<\/span> Date<\/span>()) \/\/ '\"1970-01-01T00:00:00.000Z\"'<\/span>\n<\/pre>\n
        \u3053\u306e\u554f\u984c\u3067\u306f Date.prototype.toJSON \u304c\u524a\u9664\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001toJSON \u304c\u306a\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408\u3069\u306e\u3088\u3046\u306a\u6319\u52d5\u306b\u306a\u308b\u304b\u306b\u6ce8\u76ee\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
        toJSON \u304c\u306a\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408\u3001\u5217\u6319\u53ef\u80fd\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u307f\u304c\u6587\u5b57\u5217\u5316\u3055\u308c\u307e\u3059\u3002
        Date \u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u306f\u5217\u6319\u53ef\u80fd\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5b58\u5728\u3057\u306a\u3044\u305f\u3081 {}<\/code> \u304c\u51fa\u529b\u3055\u308c\u307e\u3059\u3002
        \u3053\u306e\u6319\u52d5\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b3\u30fc\u30c9\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n
        const<\/span> obj =<\/span> {<\/span> a<\/span>:<\/span> 'a value'<\/span>,<\/span> b<\/span>:<\/span> 'b value'<\/span> }<\/span>;<\/span>\n\n\n\nObject<\/span>.defineProperty<\/span>(<\/span>obj,<\/span> 'a'<\/span>,<\/span> {<\/span>\n  enumerable<\/span>:<\/span> false<\/span>,<\/span>\n})<\/span>;<\/span>\n\nJSON<\/span>.<\/span>stringify<\/span>(<\/span>obj)<\/span> \n<\/pre>\n
        \u5217\u6319\u53ef\u80fd\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5b58\u5728\u3057\u306a\u3044\u3082\u306e\u3068\u3057\u3066\u3001Map \u3084 Set \u306a\u3069\u3082\u3042\u308a\u307e\u3059\u3002\n<\/p>\n
        Q3. \u30d6\u30e9\u30a6\u30b6\u62e1\u5f35\u6a5f\u80fd\u306e content script \u304b\u3089\u30a2\u30af\u30bb\u30b9\u53ef\u80fd\u306a API \u306f\u6b21\u306e\u3046\u3061\u3069\u308c\uff1f<\/h3>\n
          \n
        1. chrome.tabs<\/li>\n
        2. chrome.storage<\/li>\n
        3. chrome.cookies<\/li>\n
        4. chrome.safari<\/li>\n<\/ol>\n
          \n\u30d2\u30f3\u30c8\ud83d\udca1<\/summary>\n<\/details>\n
          \u300c\u30d6\u30e9\u30a6\u30b6\u5168\u4f53\u3092\u52d5\u304b\u3059 API\u300d\u300c\u30da\u30fc\u30b8\u306e\u4e2d\u3067\u3082\u5b8c\u7d50\u3067\u304d\u308b API\u300d\u304b\u3067\u5206\u3051\u3066\u8003\u3048\u3066\u307f\u3088\u3046\uff01content script \u306f\u5f8c\u8005\u5bc4\u308a\u304b\u306a\uff1f\n<\/p>\n
          \n\u6b63\u89e3\u3068\u89e3\u8aac\ud83d\udcdd<\/summary>\n<\/details>\n
          \u6b63\u89e3\u306f\u2026\u300c2. chrome.storage\u300d\u3067\u3059\uff01<\/p>\n
          \u89e3\u8aac: 
          Content Script \u306f \u30da\u30fc\u30b8\u306e DOM \u306b\u8fd1\u3044\u74b0\u5883<\/strong> \u3067\u52d5\u4f5c\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u3059\u3002
          \n\u5229\u7528\u53ef\u80fd\u306a Chrome Extension API \u306f\u9650\u5b9a\u7684\u3067\u3059\u3002\u4f8b\u3048\u3070\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
            \n
          • \u5229\u7528\u53ef:\u00a0chrome.runtime<\/code>,\u00a0chrome.i18n<\/code>,\u00a0chrome.storage<\/code><\/li>\n
          • \u4e0d\u53ef:\u00a0chrome.tabs<\/code>,\u00a0chrome.cookies<\/code><\/li>\n<\/ul>\n
            \u3088\u3063\u3066\u3053\u306e\u554f\u984c\u306e\u6b63\u89e3\u306f chrome.storage<\/code> \u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
            chrome.tabs<\/code> \u3084 chrome.cookies<\/code> \u306f \u62e1\u5f35 service worker \u3068 \u62e1\u5f35\u6a5f\u80fd\u30da\u30fc\u30b8 \u3067\u5229\u7528\u53ef\u80fd\u3067\u3059\u3002
            \u3061\u306a\u307f\u306b chrome.safari<\/code>\u00a0\u306f\u5b58\u5728\u3057\u307e\u305b\u3093\u3002\n<\/p>\n
            Q4. Popover API \u304c\u6b63\u5f0f\u5b9f\u88c5\u3055\u308c\u305f Chrome \u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\uff1f<\/h3>\n
              \n
            1. 108<\/li>\n
            2. 110<\/li>\n
            3. 112<\/li>\n
            4. 114<\/li>\n<\/ol>\n
              \n\u30d2\u30f3\u30c8\ud83d\udca1<\/summary>\n<\/details>\n
              1548006 \u00f7 13579 \u306f\uff1f\n<\/p>\n
              \n\u6b63\u89e3\u3068\u89e3\u8aac\ud83d\udcdd<\/summary>\n<\/details>\n
              \u6b63\u89e3\u306f\u2026\u300c4. 114\u300d\u3067\u3059\uff01<\/p>\n
              \u89e3\u8aac: 
              Popover API\uff08popover<\/code>\u00a0\u5c5e\u6027\u3001showPopover()<\/code>\/hidePopover()<\/code>\u3001\u30c8\u30c3\u30d7\u30ec\u30a4\u30e4\u30fc\u7ba1\u7406\uff09\u304c  Stable \u3067\u6709\u52b9\u306b\u306a\u3063\u305f\u306e\u306f Chrome 114<\/strong> \u304b\u3089\u3067\u3059\u3002<\/p>\n
              \u3061\u306a\u307f\u306b\u554f\u984c\u306e\u9078\u629e\u80a2\u3068\u306a\u3063\u3066\u3044\u308b\u4ed6\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306a\u6a5f\u80fd\u304c\u5b9f\u88c5\u3055\u308c\u307e\u3057\u305f\u3002
              108: \u65b0\u3057\u3044\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5358\u4f4d\u3068\u3057\u3066lvh<\/code>,\u00a0svh<\/code>,\u00a0dvh<\/code> \u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f
              110: :picture-in-picture<\/code> \u64ec\u4f3c\u30af\u30e9\u30b9\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f
              112: CSS \u306e\u30cd\u30b9\u30c8\u304c\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u307e\u3057\u305f<\/p>\n
              Q5. Shadow DOM \u5185\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u306b\u3064\u3044\u3066\u6b63\u3057\u3044\u3082\u306e\u306f\u3069\u308c\uff1f<\/h3>\n
                \n
              1. CSS \u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3(–foo)\u306f Shadow DOM \u306e\u5916\u304b\u3089\u5185\u3078\u4f1d\u308f\u308b<\/li>\n
              2. Shadow DOM \u304c mode: “open” \u306e\u5834\u5408\u306f\u3001Shadow DOM \u306e\u5916\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u304c\u5185\u306b\u4f1d\u308f\u308b<\/li>\n
              3. Shadow DOM \u5185\u306e  \u306f Document \u5168\u4f53\u306b\u4f5c\u7528\u3059\u308b<\/li>\n
              4. Shadow DOM \u306e\u5916\u304b\u3089\u5185\u3078\u306f\u3044\u304b\u306a\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3082\u4f1d\u308f\u3089\u306a\u3044<\/li>\n<\/ol>\n
                \n\u30d2\u30f3\u30c8\ud83d\udca1<\/summary>\n<\/details>\n
                mode: “open” \/ “closed” \u306f\u300cJS \u304b\u3089 shadowRoot \u3092\u89e6\u308c\u308b\u304b\u300d\u306e\u9055\u3044\u3067\u3042\u3063\u3066\u3001CSS \u306e\u30ab\u30d7\u30bb\u30eb\u5316\u6319\u52d5\u3068\u306f\u5225\u7269\u3060\u3088\uff01\n<\/p>\n
                \n\u6b63\u89e3\u3068\u89e3\u8aac\ud83d\udcdd<\/summary>\n<\/details>\n
                \u6b63\u89e3\u306f\u2026\u300c1. CSS \u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3(–foo)\u306f Shadow DOM \u306e\u5916\u304b\u3089\u5185\u3078\u4f1d\u308f\u308b\u300d\u3067\u3059\uff01<\/p>\n
                \u89e3\u8aac: 
                Shadow DOM \u306f \u30b9\u30bf\u30a4\u30eb\u304c\u30ab\u30d7\u30bb\u30eb\u5316<\/strong> \u3055\u308c\u3066\u304a\u308a\u3001\u901a\u5e38\u306e CSS \u30bb\u30ec\u30af\u30bf\u3084\u7d99\u627f\u306f\u5883\u754c\u3092\u8d8a\u3048\u3089\u308c\u307e\u305b\u3093\u3002
                \u307e\u305f\u3001Shadow \u5185\u306e\u00a0\u00a0\u306f\u305d\u306e Shadow Tree \u306b\u306e\u307f\u4f5c\u7528\u3057\u307e\u3059\u3002
                \u305f\u3060\u3057\u3001CSS \u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong>\u306f\u30db\u30b9\u30c8\u304b\u3089 Shadow Tree \u5185\u306b\u4f1d\u642c\u3057\u307e\u3059\u3002<\/p>\n
                mode<\/code>\u00a0\u306f DOM \u30a2\u30af\u30bb\u30b9\u53ef\u5426\u306e\u8a2d\u5b9a\u3067\u3042\u308a\u30b9\u30bf\u30a4\u30eb\u3068\u306f\u7121\u95a2\u4fc2\u3067\u3059\u3002
                \"open\"<\/code> \u306e\u6642\u306b\u306f\u3001\u5916\u90e8\u306e JavaScript \u304b\u3089\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u3002
                \"closed\"<\/code> \u306e\u6642\u306b\u306f\u3001\u5916\u90e8\u306e JavaScript \u304b\u3089\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n
                \u3053\u306e\u9055\u3044\u306b\u3064\u3044\u3066\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b3\u30fc\u30c9\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n
                const<\/span> openHost =<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>\nopenHost.<\/span>attachShadow<\/span>({<\/span> mode<\/span>:<\/span> 'open'<\/span> })<\/span>;<\/span>\n\nconst<\/span> closedHost =<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>\nclosedHost.<\/span>attachShadow<\/span>({<\/span> mode<\/span>:<\/span> 'closed'<\/span> })<\/span>;<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>openHost.<\/span>shadowRoot)<\/span>;<\/span>   \nconsole<\/span>.<\/span>log<\/span>(<\/span>closedHost.<\/span>shadowRoot)<\/span>;<\/span> \n<\/pre>\n
                \u3061\u306a\u307f\u306b\u3001\u3053\u306e\u554f\u984c\u3068\u76f4\u63a5\u7684\u306a\u95a2\u4fc2\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001::part<\/code> \u64ec\u4f3c\u8981\u7d20\u3092\u7528\u3044\u308b\u3053\u3068\u3067\u30db\u30b9\u30c8\u304b\u3089\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3067\u304d\u307e\u3059\u3002\n<\/p>\n
                \u53c2\u52a0\u8005\u306e\u50be\u5411\u3068\u5b66\u3073<\/h2>\n
                \u56de\u7b54\u306e\u50be\u5411\u304c\u5370\u8c61\u7684\u3060\u3063\u305f\u554f\u984c\u3092\u8003\u5bdf\u3057\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\uff01<\/p>\n
                document.elementsFromPoint()<\/h3>\n
                \u7d04\u534a\u6570\u306e\u4eba\u304c \u300cpointer-events: none \u306e\u8981\u7d20\u300d\u3092\u9078\u3093\u3067\u4e0d\u6b63\u89e3\u3068\u306a\u3063\u3066\u3044\u307e\u3057\u305f\u3002
                \u4ed6\u306e\u9078\u629e\u80a2\u306f\u3059\u3079\u3066\u3001\u8981\u7d20\u304c\u753b\u9762\u4e0a\u3067\u8996\u8a8d\u3067\u304d\u306a\u3044\u72b6\u614b\u306b\u306a\u308b\u306e\u306b\u5bfe\u3057\u3001\u300cpointer-events: none \u306e\u8981\u7d20\u300d\u306f\u552f\u4e00\u753b\u9762\u4e0a\u3067\u8996\u8a8d\u3067\u304d\u308b\u306e\u3067\u3001\u3053\u306e\u9078\u629e\u80a2\u3092\u9078\u3093\u3060\u4eba\u304c\u591a\u304b\u3063\u305f\u306e\u3067\u306f\u306a\u3044\u304b\u3068\u63a8\u5bdf\u3057\u3066\u3044\u307e\u3059\ud83e\uddd0<\/p>\n
                Shadow DOM \u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/h3>\n
                \u3053\u308c\u306f\u6700\u3082\u6b63\u89e3\u7387\u304c\u4f4e\u3044\u554f\u984c\u3067\u3057\u305f\ud83e\udd2f.
                \nShadow DOM \u306f\u30b9\u30bf\u30a4\u30eb\u306e\u30ab\u30d7\u30bb\u30eb\u5316\u3092\u3059\u308b\u3082\u306e\u3001\u3068\u3044\u3046\u77e5\u8b58\u304c\u3042\u3063\u305f\u4eba\u306b\u3068\u3063\u3066\u306f\u300c\u3044\u304b\u306a\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3082\u4f1d\u308f\u3089\u306a\u3044\u300d\u3068\u3044\u3046\u9078\u629e\u80a2\u304c\u5f15\u3063\u639b\u3051\u306b\u306a\u3063\u305f\u306e\u3067\u306f\u306a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
                \u307e\u305f\u300cmode: “open” \u3067\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u304c\u4f1d\u308f\u308b\u300d\u3092\u9078\u3093\u3060\u4eba\u304c\u4e00\u756a\u591a\u304b\u3063\u305f\u306e\u306f\u3001Shadow DOM \u306b\u99b4\u67d3\u307f\u304c\u306a\u3044\u4eba\u306b\u3068\u3063\u3066 mode: \"open\"<\/code> \u3068\u3044\u3046\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u3044\u304b\u306b\u3082\u4f55\u304b\u304c\u4f1d\u642c\u3057\u305d\u3046\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u898b\u3048\u305f\u306e\u304b\u3082\uff1f\u3068\u611f\u3058\u307e\u3057\u305f\uff01<\/p>\n
                \u4f1a\u5834\u306e\u53cd\u5fdc\u30fb\u76db\u308a\u4e0a\u304c\u308a<\/h2>\n
                \u5f53\u65e5\u306f\u3001\u30af\u30a4\u30ba\u306e\u89e3\u8aac\u3092\u4ea4\u3048\u3066\u53c2\u52a0\u8005\u306e\u9762\u3005\u3068\u8272\u3005\u3068\u304a\u8a71\u3055\u305b\u3066\u3082\u3089\u3044\u307e\u3057\u305f\ud83d\ude0c<\/p>\n
                \u30af\u30a4\u30ba\u306e\u611f\u60f3\u3068\u3057\u3066\u306f\u3001<\/p>\n
                  \n
                • \u300c\u601d\u3063\u3066\u3044\u305f\u3088\u308a\u96e3\u3057\u304b\u3063\u305f\uff01\u300d<\/li>\n
                • \u300c\u4f7f\u3063\u305f\u3053\u3068\u304c\u306a\u3044 API \u3060\u3063\u305f\uff01\u300d<\/li>\n<\/ul>\n
                  \u3068\u3044\u3046\u58f0\u304c\u591a\u304b\u3063\u305f\u3067\u3059\uff01<\/p>\n
                  \u30af\u30a4\u30ba\u3092\u958b\u50ac\u3057\u3066\u3044\u308b\u69d8\u5b50\u3092\u898b\u3066\u3001\u300c\u81ea\u5206\u3082\u30af\u30a4\u30ba\u3084\u3063\u3066\u3082\u3044\u3044\u3067\u3059\u304b\uff1f\u300d\u3068\u58f0\u3092\u304b\u3051\u3066\u304f\u308c\u308b\u65b9\u3082\u3044\u3066\u3001\u3068\u3066\u3082\u5b09\u3057\u304b\u3063\u305f\u3067\u3059\ud83d\ude4c
                  \u30af\u30a4\u30ba\u306e\u30d2\u30f3\u30c8\u3092\u30c6\u30c3\u30af\u30bf\u30c3\u30c1\u306e\u30d7\u30ed\u30c0\u30af\u30c8\u3067\u5b9f\u88c5\u3059\u308b\u3068\u3044\u3046\u5de5\u592b\u3082\u3057\u305f\u305f\u3081\u3001\u30d7\u30ed\u30c0\u30af\u30c8\u306b\u5b9f\u969b\u306b\u89e6\u308c\u3066\u3082\u3089\u3046\u826f\u3044\u6a5f\u4f1a\u306b\u3082\u306a\u308a\u826f\u304b\u3063\u305f\u3067\u3059\ud83d\udca1<\/p>\n
                  \u307e\u3068\u3081<\/h2>\n
                  \u305f\u304f\u3055\u3093\u306e\u4eba\u306b\u30af\u30a4\u30ba\u306b\u53c2\u52a0\u3057\u3066\u3082\u3089\u3048\u3066\u3001\u30d6\u30fc\u30b9\u3082\u76db\u308a\u4e0a\u304c\u3063\u3066\u5b09\u3057\u304b\u3063\u305f\u3067\u3059\ud83e\udd73
                  \u30af\u30a4\u30ba\u306b\u53c2\u52a0\u3057\u3066\u304f\u308c\u305f\u307f\u306a\u3055\u307e\u3001\u672c\u5f53\u306b\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01
                  \u4eca\u56de\u306e\u30d6\u30fc\u30b9\u3067\u4f7f\u3063\u305f\u30af\u30a4\u30ba\u30a2\u30d7\u30ea\u306e\u5236\u4f5c\u306e\u88cf\u5074\u3082\u4eca\u5f8c\u306e\u8a18\u4e8b\u3067\u7d39\u4ecb\u3059\u308b\u4e88\u5b9a\u3067\u3059\u306e\u3067\u3001\u305d\u3061\u3089\u3082\u8aad\u3093\u3067\u3082\u3089\u3048\u305f\u3089\u5b09\u3057\u3044\u3067\u3059\uff01<\/p>\n<\/div>\n