标签: shadow-dom

我有一个结构:

<div>
    #shadow-root
        <span>

如何引用div从span？

span.parentNode是#shadow-root,.parentNode从那是null

现在core-toolbar有一个indent类将右侧的标题缩进60px,而材料设计规定边距应该实际上80px(事实上​​,数字60从未在整个文档中显示).

所以我可以轻松地编辑它,bower_components/core-toolbar/core-toolbar.css但问题是,一旦我将项目移动到其他地方,我必须在完成我的bower安装等后进行相同的编辑.

请注意,如果我core-toolbar要说延伸,我会遇到问题core-header-panel......因为它会寻找任何一个<core-toolbar>或类似的东西,"core-header"这有点烦人,但它是我可以忍受的东西.

做这样的事情最好的方法是什么？

为什么阴影根样式在我的.fa-xxx类中不显示？

阴影根的东西将我使用的类添加到显示无堆,但只添加我添加的特定类!

我正在使用PHP来包含导航,页脚等,但这些不会受到影响.例如,它在我的导航中工作得很好.在那里它显示字体就好了.

造成这种情况的原因是什么,我如何控制它？

我正在开发一个使用 HTML 5 本机 Web 组件的 Web 应用程序。我的问题是我有很多用于所有这些的通用 CSS，并且我使用了很棒的字体来制作漂亮的图标。现在我将所有样式都放在“/deep”阴影穿孔中，但 Chrome 说：“/deep/ 组合器已弃用。” 您对如何在整个应用程序上使用全局 CSS 和 CSS 库（如字体真棒）有什么建议吗？

谢谢 ：）

我正在努力扩展HTMLOptionElement,

<template id="cOptionTemplate">
    <content></content>
</template>

<select>
    <option is="custom-option">Test</option>
</select>

var cOption = document.registerElement('custom-option', {
    prototype: Object.create(HTMLOptionElement.prototype, {
        createdCallback: {
            value: function() {
                var template = document.getElementById("cOptionTemplate")
                var clone = document.importNode(template.content, true);
                this.createShadowRoot().appendChild(clone);
            }
        },
        attributeChangedCallback: {
            value: function (attrName, oldVal, newVal){
                switch(attrName){
                    case "attr1":
                        console.log(this);
                }
            }
        }
    }),
    extends: "option"
});

这是代码的演示.

但显然这不起作用,因为它已经有一个用户代理shadowRoot？

未捕获的InvalidStateError:无法在"元素"上执行"createShadowRoot":无法在已托管用户代理影子树的主机上创建影子根.

我从未见过这个错误,我认为它可以让你附加多个阴影根.它为什么会发生,是否有办法让它发挥作用？

我正在玩自定义元素.我很难找到缺乏支持的polyfill浏览器的正确方式(或者感觉正确的方式)(看似只有Firefox？).

我目前正在做以下事情:

if ('customElements' in window) {
    var e = document.createElement('script');
    e.src = '/static/elements/my-element.js';
    document.body.appendChild(e);   
} else {
    var e = document.createElement('script');
    // customElements
    e.src = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.8/webcomponents-sd-ce.js';
    e.onload = function() {
        var c = document.createElement('script');
        // ShadyCSS
        c.src = '/static/js/custom-style-interface.min.js';
        c.onload = function() {
            var i = document.createElement('script');
            i.src = '/static/elements/my-element.js';
            document.body.appendChild(i);
        }
        document.body.appendChild(c);
    }
    document.body.appendChild(e);
}

这可行,但显然效率极低(特别是在慢/高延迟网络上),而且看起来非常嘈杂.在尝试支持Firefox之前,我可以做到:

<script src="/static/elements/my-element.js"></script>

现在我上面有这种憎恶.必须有一个更好的方法,但我似乎找不到一个.

如何确保customElement和ShadyCSS polyfill之前运行my-element.js而不会延迟下载量？任何指针都非常感谢!

编辑: 现在我正在使用另一种方法,我将在这里添加.我不认为它是完美的,但似乎比我的第一种方法更好或强迫每个人下载polyfills无论他们是否需要它们.

function insertScript(url, downloadAsync) {
    const script = document.createElement('script');
    document.head.appendChild(script);
    script.async = downloadAsync;
    script.src …

使用CKeditor角度分量如何设置编辑器高度？

根据文档，可以通过将编辑器样式设置为：

 min-height: 500px !important;

但这不起作用！

我需要访问具有关闭的Shadow DOM的Web组件的DOM，以进行某些Selenium测试。我读过一些参考资料，您可以Element.prototype.attachShadow在文档启动时重写这些参考资料，以将“阴影”从“关闭”更改为“打开”。为此，我创建了一个Chrome扩展程序。以下是我的manifest.json：

{
    "name": "SeleniumTesting",
    "description": "Extension to open closed Shadow DOM for selenium testing",
    "version": "1",
    "author": "SeleniumTesting",
    "manifest_version": 2,
    "permissions": ["downloads", "<all_urls>"],
    "content_scripts": [{
        "matches": ["http://localhost:5000/*"],
        "run_at": "document_start",
        "all_frames": true,
        "js": ["shadowInject.js"]
    }]
}

还有我的shadowInject.js

console.log('test');
Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function () {
    console.log('attachShadow');
    return this._attachShadow( { mode: "open" } );
};

为了对其进行测试，我在ASPNetCore MVC项目中创建了我的组件。以下是我的JavaScript，用于创建自定义组件：

customElements.define('x-element', class extends HTMLElement {
    constructor() {
        super(); 
        this._shadowRoot = this.attachShadow({
            mode: 'closed'
        });
        this._shadowRoot.innerHTML = `<div class="wrapper"> …

我正在使用LitElement创建一个Web组件。这来自https://lit-element.polymer-project.org/guide/start

// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';

// Extend the LitElement base class
class MyElement extends LitElement {

  /**
   * Implement `render` to define a template for your element.
   *
   * You must provide an implementation of `render` for any element
   * that uses LitElement as a base class.
   */
  render(){
    /**
     * `render` must return a lit-html `TemplateResult`.
     *
     * To create a `TemplateResult`, tag a JavaScript …

我的第一个Rust生产的WASM正在产生以下错误，我不知道如何进行调试。

wasm-000650c2-23:340 Uncaught RuntimeError: memory access out of bounds
    at dlmalloc::dlmalloc::Dlmalloc::free::h36961b6fbcc40c05 (wasm-function[23]:670)
    at __rdl_dealloc (wasm-function[367]:8)
    at __rust_dealloc (wasm-function[360]:7)
    at alloc::alloc::dealloc::h90df92e1f727e726 (wasm-function[146]:100)
    at <alloc::alloc::Global as core::alloc::Alloc>::dealloc::h7f22ab187c7f5835 (wasm-function[194]:84)
    at <alloc::raw_vec::RawVec<T, A>>::dealloc_buffer::hdce29184552be976 (wasm-function[82]:231)
    at <alloc::raw_vec::RawVec<T, A> as core::ops::drop::Drop>::drop::h3910dccc175e44e6 (wasm-function[269]:38)
    at core::ptr::real_drop_in_place::hd26be2408c00ce9d (wasm-function[267]:38)
    at core::ptr::real_drop_in_place::h6acb013dbd13c114 (wasm-function[241]:50)
    at core::ptr::real_drop_in_place::hb270ba635548ab74 (wasm-function[69]:192)

上下文：从TypeScript自定义元素调用的最新Chrome，Rust wasm-bindgen代码，在影子DOM中的画布上运行。呈现到画布上的数据来自HTML5 AudioBuffer。所有rust变量都在本地范围内。

如果文档中仅出现一个实例，则Web组件可以正常工作，但是如果再出现其他实例，则如上所述将转储堆栈跟踪。该代码运行没有任何其他问题。

我知道Chrome中存在突出的内存错误-这是它们的外观吗，还是有经验的锈/毛病开发人员可以告诉我这是否异常？

js-sys = "0.3.19"
wasm-bindgen = "0.2.42"
wee_alloc = { version = "0.4.2", optional = true }
[dependencies.web-sys]
version = "0.3.4"

rust代码很小，仅将AudioBuffer的两个通道呈现到提供的HTMLCanvasElement：

#[wasm_bindgen]
pub fn render(
    canvas: web_sys::HtmlCanvasElement,
    audio_buffer: &web_sys::AudioBuffer,
    stroke_style: …