shadow-root内のボックス要素をjQueryで非表示にしたい

初めまして、オガと申します。
WordPressの記事内にoEmbedでのツイート埋め込みを利用していたのですが、
ツイッターの仕様が変更されたのか、最近になって引用ツイートの引用元が表示されるようになってしまいました。

Chromeの検証ツールで埋め込みツイートのソースを見てみると、埋め込みツイート全体がshadow-rootで分離しているようだったので、
jQueryを利用してshadow-root内のボックス要素を非表示にできないものかと考えました。
しかしjava scriptに対する知見が浅く、どのようなスクリプトを書いたらよいのか分かりません。

jQueryでShadow-Root内のボックス要素を非表示にするには、どのように記述したらよいでしょうか。
お詳しい方がいらっしゃいましたらご教授頂ければ幸いです。

前提・実現したいこと

埋め込みツイート（Shadow-rootで分離している）内のボックス要素（<div class="Tweet-card">~</div>）を非表示にしたい

該当のソースコード

HTML
1<twitterwidget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-2" style="position: static; visibility: visible; display: block; transform: rotate(0deg); max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;" data-tweet-id="1007722935237337088">
2#shadow-root
3<style type="text/css">.SandboxRoot { display: none; }</style>
4中略
5<div class="Tweet-card">~</div>　←このボックス要素を非表示にしたい
6中略
7</twitterwidget>

試したこと

style.css内に display:none !important;を記述して<div class="Tweet-card">~</div>を非表示にしようとする
→Shadow-Root内にCSSが適用されず

補足情報（FW/ツールのバージョンなど）

ブラウザ：Chrome
WordPress4.8.1

行動規範の内容に同意します

回答1件

ベストアンサー

単純に消したいだけならおそらくこう。

js
1$(function(){
2    $(".Tweet-card").remove();
3});

もしかしたらtwitterwidget のロードイベントをとった方がいいかもしれないですが、そこは調整してください。

js
1$("twitterwidget ").on("load",function () {
2    $(".Tweet-card").remove();
3});

投稿2018/06/18 06:51

m.ts10806

総合スコア80850

wogwogwog

2018/06/19 01:02

mts10806さんご回答頂き誠にありがとうございます！身近にjQueryに詳しい人物がおらず、回答して頂けて本当にありがたいです…。先ほど教えて頂いたスクリプトを記載してみたのですが、shadow-root外の要素であれば非表示にできるものの、shadow-root内の要素は非表示にできず…。 shadow-DOM内（？）にアクセスするためにはまた別の記載が必要になるのでしょうか…？もしお分かりでしたら、お手すきの際にご教授頂けたら幸いです…。

m.ts10806

2018/06/19 01:05

removeは内部の要素まで削除（非表示ではなく削除です。htmlから物理的に消します）するので正しくブロック要素を指定していれば問題ないはずです。別のclassが関係しているかもしれませんが。。

wogwogwog

2018/06/19 01:40

お早い回答、誠にありがとうございます…！！ class名を変えて何度か試してみましたが、やはりshadow-root外の要素は削除できるものの、shadow-root内の要素は削除できず…。別のclassが関係しているかもしれないということで、ブログ全体のソースを見て回っていたところ、挿入したスクリプトのすぐ下に以下のようなiframeが挿入されていました。 <iframe scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.c5b006ac082bc92aa829181b9ce63af1.html?origin=http%3A%2F%2Fwog.jp&settingsEndpoint=https%3A%2F%2Fsyndication.twitter.com%2Fsettings" title="Twitter settings iframe" style="display: none;"> #document <html> <head><title>Twitter Widget Iframe</title></head> <body> <script type="text/javascript"> !function(){Function&&Function.prototype&&Function.prototype.bind&&(/MSIE ([6789]|10)/.test(navigator.userAgent)||!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var e={};return n.m=t,n.c=e,n.p="https://platform.twitter.com/",n(0)}([function(t,n,e){t.exports=e(44)},,function(t,n){t.exports=document},function(t,n){t.exports=location},function(t,n){t.exports=window},function(t,n,e){function r(t){return encodeURIComponent(t).replace(/+/g,"%2B").replace(/'/g,"%27")}function o(t){return decodeURIComponent(t)}function i(t){var n=[];return f.forIn(t,function(t,e){var o=r(t);f.isType("array",e)||(e=[e]),e.forEach(function(t){a.hasValue(t)&&n.push(o+"="+r(t))})}),n.sort().join("&")}function s(t){var n,e={};return t?(n=t.split("&"),n.forEach(function(t){var n=t.split("="),r=o(n[0]),i=o(n[1]);if(2==n.length)return f.isType("array",e[r])?void e[r].push(i):r in e?(e[r]=[e[r]],void e[r].push(i)):void(e[r]=i)}),e):{}}function u(t,n){var e=i(n);return e.length>0?f.contains(t,"?")?t+"&"+i(n):t+"?"+i(n):t}function c(t){var n=t&&t.split("?");return 2==n.length?s(n[1]):{}}var a=e(6),f=e(7);t.exports={url:u,decodeURL:c,decode:s,encode:i,encodePart:r,decodePart:o}},function(t,n,e){function r(t){return void 0!==t&&null!==t&&""!==t}function o(t){return u(t)&&t%1===0}function i(t){return"string"===v.toType(t)}function s(t){return u(t)&&!o(t)}function u(t){return r(t)&&!isNaN(t)}function c(t){return r(t)&&"array"==v.toType(t)}function a(t){return v.contains(y,t)}function f(t){return v.contains(m,t)}function l(t){return!!r(t)&&(!!f(t)||!a(t)&&!!t)}function p(t){if(u(t))return t}function d(t){if(s(t))return t}function h(t){if(o(t))return parseInt(t,10)}var v=e(7),m=[!0,1,"1","on","ON","true","TRUE","yes","YES"],y=[!1,0,"0","off","OFF","false","FALSE","no","NO"];t.exports={hasValue:r,isInt:o,isFloat:s,isNumber:u,isString:i,isArray:c,isTruthValue:f,isFalseValue:a,asInt:h,asFloat:d,asNumber:p,asBoolean:l}},function(t,n,e){function r(t){return l(arguments).slice(1).forEach(function(n){i(n,function(n,e){t[n]=e})}),t}function o(t){return i(t,function(n,e){c(e)&&(o(e),a(e)&&delete t[n]),void 0!==e&&null!==e&&""!==e||delete t[n]}),t}function i(t,n){var e;for(e in t)t.hasOwnProperty&&!t.hasOwnProperty(e)||n(e,t[e]);return t}function s(t){return{}.toString.call(t).match(/\s([a-zA-Z]+)/)[1].toLowerCase()}function u(t,n){return t==s(n)}function c(t){return t===Object(t)}function a(t){var n;if(!c(t))return!1;if(Object.keys)return!Object.keys(t).length;for(n in t)if(t.hasOwnProperty(n))return!1;return!0}function f(t,n){d.setTimeout(function(){t.call(n||null)},0)}function l(t){return t?Array.prototype.slice.call(t):[]}function p(t,n){return!(!t||!t.indexOf)&&t.indexOf(n)>-1}var d=e(4);t.exports={aug:r,async:f,compact:o,contains:p,forIn:i,isObject:c,isEmptyObject:a,toType:s,isType:u,toRealArray:l}},,,,,,,,,,,,function(t,n,e){function r(){}function o(){}function i(t,n){}function s(){f("error",d.toRealArray(arguments))}function u(t){v&&(h[t]=a())}function c(t){var n;v&&(h[t]?(n=a(),o("_twitter",t,n-h[t])):r("timeEnd() called before time() for id: ",t))}function a(){return p.performance&&+p.performance.now()||+new Date}function f(t,n){if(p.console&&p.console[t])switch(n.length){case 1:p.console[t](n[0]);break;case 2:p.console[t](n[0],n[1]);break;case 3:p.console[t](n[0],n[1],n[2]);break;case 4:p.console[t](n[0],n[1],n[2],n[3]);break;case 5:p.console[t](n[0],n[1],n[2],n[3],n[4]);break;default:0!==n.length&&p.console.warn&&p.console.warn("too many params passed to logger."+t)}}var l=e(3),p=e(4),d=e(7),h={},v=d.contains(l.href,"tw_debug=true");t.exports={devError:r,devInfo:o,devObject:i,publicError:s,time:u,timeEnd:c}},,function(t,n,e){var r=e(4),o=r.JSON;t.exports={stringify:o.stringify||o.encode,parse:o.parse||o.decode}},,,,,,function(t,n,e){function r(t){return t=t||g,t.devicePixelRatio?t.devicePixelRatio>=1.5:!!t.matchMedia&&t.matchMedia("only screen and (min-resolution: 144dpi)").matches}function o(t){return t=t||E,/(Trident|MSIE|Edge[/ ]?\d)/.test(t)}function i(t){return t=t||E,/MSIE 9/.test(t)}function s(t){return t=t||E,/MSIE 10/.test(t)}function u(t){return t=t||E,/(iPad|iPhone|iPod)/.test(t)}function c(t){return t=t||E,/^Mozilla/5.0 (Linux; (U; )?Android/.test(t)}function a(t,n){return t=t||g,n=n||E,t.postMessage&&!(o(n)&&t.opener)}function f(t,n,e){return t=t||g,n=n||_,e=e||E,"ontouchstart"in t||/Opera Mini/.test(e)||n.msMaxTouchPoints>0}function l(){var t=m.body.style;return void 0!==t.transition||void 0!==t.webkitTransition||void 0!==t.mozTransition||void 0!==t.oTransition||void 0!==t.msTransition}function p(){return!!g.IntersectionObserver}function d(){return!!(g.Promise&&g.Promise.resolve&&g.Promise.reject&&g.Promise.all&&g.Promise.race&&function(){var t;return new g.Promise(function(n){t=n}),w.isType("function",t)}())}function h(){return g.performance&&g.performance.getEntriesByType}function v(){try{return g.localStorage.setItem("local_storage_support_test","true"),"undefined"!=typeof g.localStorage}catch(t){return y.devError("window.localStorage is not supported:",t),!1}}var m=e(2),y=e(19),_=e(28),g=e(4),w=e(7),E=_.userAgent;t.exports={retina:r,anyIE:o,ie9:i,ie10:s,ios:u,android:c,canPostMessage:a,touch:f,cssTransitions:l,hasPromiseSupport:d,hasIntersectionObserverSupport:p,hasPerformanceInformation:h,hasLocalStorageSupport:v}},function(t,n){t.exports=navigator},,,,,function(t,n,e){var r=e(34).Promise,o=e(4),i=e(27);t.exports=i.hasPromiseSupport()?o.Promise:r},function(t,n,e){var r;(function(t){/*! * @overview es6-promise - a tiny implementation of Promises/A+. * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald) * @license Licensed under MIT license * See https://raw.githubusercontent.com/jakearchibald/es6-promise/master/LICENSE * @version 2.3.0 */ （以下、続きます）

wogwogwog

2018/06/19 01:41

m.ts10806

2018/06/19 01:44

JavaScriptで動的に挿入されている要素もありそうなので、開発ツールからそのiframeを見たほうが良いかもしれません。

wogwogwog

2018/06/19 02:12

何度もすみません…！ありがとうございます…！汗開発ツールからiframeを見るというと、ChromeのSourcesタブで開くということでしょうか…？また、教えて頂いた削除のスクリプトは</body>の直前に記述したのですが、なぜかその後ろにこの謎のスクリプトがきているので、恐らくこのスクリプトが動的に要素を挿入しているのかもしれません…。なんとかして、教えて頂いたスクリプトをbody内の一番最後に記述する（もしくは最優先で適用されるように記述する）方法はないものでしょうか…？汗

m.ts10806

2018/06/19 02:44

いえ、Chromeで言えば「Elements」ですね。 JavaScriptで動的に生成されたHTMLも動的に生成された状態で確認できるので重宝します。

m.ts10806

2018/06/19 02:46

あと「最優先」だと動的に取得・生成する前に実行しようとして、remove()意味がなくなるので、「生成後」の方がいいです。回答に「もしかしたらtwitterwidget のロードイベントをとった方がいいかもしれないです」と書いたのはそういった意味合いが込められています。

wogwogwog

2018/06/21 08:08

mts10806さん ChromeのElements機能で要素を確認しながら作業を進めていったところ、教えて頂いたスクリプトが走り、モバイル版のChromeから該当要素を削除することができました！（なぜかPC版Chromeでは該当要素が削除されず…キャッシュの問題でしょうか…）しかしブログの主な閲覧者はモバイルユーザーなので、これで解決とさせて頂きます！ずっと訳も分からないまま同じところをグルグルしていたので、とても助かりました…！ mts10806さん、本当にありがとうございました！

m.ts10806

2018/06/21 08:09

解決できたようで何よりです。同じソースであればキャッシュの可能性は充分にあります。

行動規範の内容に同意します