标签: shady-dom

Polymer的shady DOM与shadow DOM有什么区别？

我在使用shadow DOM作为其中一个Web组件(纸张步进器)时遇到问题,而且需要使用阴影DOM.我不确定区别是什么,为什么会这样.

shadow-dom polymer polymer-1.0 shady-dom

Jai*_*ime

lucky-day

8
推荐指数

1
解决办法

3740
查看次数

ShadyCSS polyfill无法在Edge中正确处理CSS

我正在为第三方网站构建一个小部件，使用影子DOM来防止其CSS干扰我们的CSS。我正在使用ShadyDOM和ShadyCSS polyfills使它在Edge和IE中工作，但是它并没有像我期望的那样为阴影DOM转换CSS。

例：

<!DOCTYPE html>
<html>
	<head>
		<title>Shadow DOM test</title>
	</head>
	<body>
		<div id="container">container is here</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
		<script>
			const shadow = document.getElementById("container").attachShadow({ mode: "open" });
			const style = document.createElement("style");
			style.innerHTML = `
				:host .stuff {
					background: #ff00ff;
				}
			`;
			shadow.appendChild(style);
			const div = document.createElement("div");
			div.classList.add("stuff");
			div.innerHTML = "stuff inside shadow dom";
			shadow.appendChild(div);
		</script>
	</body>
</html>

Run Code Online (Sandbox Code Playgroud)

In Chrome (which supports shadow DOM natively), the stuff div has a pink background, as I would expect. But in …

javascript web-component polyfills shadow-dom shady-dom

Eli*_*ria

2019 10-27

8
推荐指数

1
解决办法

269
查看次数

如何在Polymer 2.0中启用Shady DOM？

Polymer 1.x 默认使用Shady DOM,但可以在初始化时通过window.Polymer在导入之前设置对象来更改,polymer.html如下所示:

<script>window.Polymer = {dom: 'shadow'};</script>
<link rel="import" href="polymer.html">

Run Code Online (Sandbox Code Playgroud)

然而,无论如何,Polymer 2.0似乎都使用了Shadow DOMwindow.Polymer = {dom: 'shady'}.如何切换到Shady DOM？

polymer shady-dom polymer-2.x

ton*_*y19

2017 12-20

7
推荐指数

1
解决办法

2604
查看次数

如何使用硒在youtube中获得所有评论？

该网页显示有 702 条评论。
目标 youtube 示例

我写了一个函数get_total_youtube_comments(url)，很多代码是从github上的项目复制过来的。

github上的项目

def get_total_youtube_comments(url):
    from selenium import webdriver
    from selenium.webdriver.chrome.options import Options
    from selenium.common.exceptions import TimeoutException
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.common.keys import Keys
    from selenium.webdriver.support import expected_conditions as EC
    from selenium.webdriver.common.by import By
    import time
    options = webdriver.ChromeOptions()
    options.add_argument('--no-sandbox')
    options.add_argument('--disable-dev-shm-usage')
    options.add_argument("--headless")
    driver = webdriver.Chrome(options=options,executable_path='/usr/bin/chromedriver')
    wait = WebDriverWait(driver,60)
    driver.get(url)
    SCROLL_PAUSE_TIME = 2
    CYCLES = 7
    html = driver.find_element_by_tag_name('html')
    html.send_keys(Keys.PAGE_DOWN)   
    html.send_keys(Keys.PAGE_DOWN)   
    time.sleep(SCROLL_PAUSE_TIME * 3)
    for i in range(CYCLES):
        html.send_keys(Keys.END)
        time.sleep(SCROLL_PAUSE_TIME)
    comment_elems = driver.find_elements_by_xpath('//*[@id="content-text"]') …

Run Code Online (Sandbox Code Playgroud)

youtube selenium google-chrome python-3.x shady-dom

it_*_*ure

2020 07-11

6
推荐指数

2
解决办法

1790
查看次数

Shadow DOM v1 CSS polyfill

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

这让我非常兴奋，我可以从头开始编写自己的自定义网页而无需聚合物。

例如，仅发现CSS :host在Edge和FireFox中不起作用。import在w3c弄清楚他们要使用es6模块之前，我现在可以不用html 了，但是每个浏览器都有自己的一半实现的Shadow DOM版本，而没有CSS会推动我的工作。

因此，我仍然需要完整的聚合物堆栈，以在所有浏览器中具有Web组件。

<script src="../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../hello-world.html">

<hello-world>Hello World Polymer 2.x</hello-world>

有人知道如何将Edge和FireFox填充为一个实际的Shadow DOM，而不是一个伪装成一个本地的Shadow DOM吗？

这是我尝试过的方法，但是我不知道如何告诉Edge和FireFox将其Shadow想要放置在其他位置并使用阴影/阴影。

https://jsbin.com/quvozo

<!DOCTYPE html>
<html>

<head>
  <title>Components</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>

<body>
  <hello-world>Hello World ES2015</hello-world>
  <script>
    function loadScript(src, main) {
      return new Promise(function(resolve, reject) {
        const script = document.createElement('script');
        script.async = true;
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    }
    let polyfilled = false;
    const loadPromises = []; …

Run Code Online (Sandbox Code Playgroud)

firefox shadow-dom custom-element microsoft-edge shady-dom

Ger*_*ens

2016 11-22

5
推荐指数

1
解决办法

1695
查看次数