小编Sup*_*arp的帖子

我已经定义了一个自定义元素,我只想在自定义元素升级到其注册类型时才执行脚本.用例是我必须调用自定义方法.

我的主要html文件如下所示:

<project-list></project-list>
<script>
    var project_list = document.getElementsByTagName("project-list")[0]
    project_list.custom_method("some_data");
</script>

自定义元素在HTML导入中注册,如下所示:

<script>
  "use strict";
  var currentScript = document._currentScript || document.currentScript;

  class ProjectList extends HTMLElement {

    createdCallback(){
      console.log("created");
    }

    custom_method(data) {
      console.log("custom_method() OK");
      console.log(data);

      this.innerHTML = data;
    }

  }

  document.registerElement("project-list", ProjectList);
</script>

我的问题很简单:如何确保主要html文件中的脚本仅在自定义元素获得其custom_method方法后才被调用？

我正在寻找一个优雅的解决方案.规范作者会想到的东西.我不介意更改架构(例如,如果有必要,可以将javascript从主文件移动到另一个自定义元素中).

我正在寻找一种从外部设计阴影DOM的方法.例如,我想将所有'span.special'元素中所有文本的颜色设置为RED.包括来自shadow DOM的'span.special'元素.我怎么能这样做？

以前为此目的有:: shadow伪元素和/ deep / combinator aka >>>.所以我可以写一些像

span.special, *::shadow span.special {
    color: red
}

但是现在:: shadow,/ deep /和>>>已被弃用.那么,我们有什么替代它们？

我需要从Shadow DOM获取元素并进行更改.我怎么能这样做？

<div>
     <input type="range" min="100 $" max="3000 $">
</div>

你知道Visual Studio Code的一个插件会缩小JS文件吗？我想在保存文件后立即缩小文件.

我是webcomponents的新手.由于web组件的v1可用,我从那里开始.我已经在网上阅读了关于他们的各种帖子.我对正确编写它们特别感兴趣.我已经阅读了有关插槽并让它们正常工作的信息,尽管我的努力并未导致按照我的预期方式工作的插槽web组件.

如果我编写了这样的嵌套Web组件,嵌套/开槽web组件中的DOM不会插入父级的插槽中:

<parent-component>
  <child-component slot="child"></child-component>
</parent-component>

这是父webcomponent HTML:

<div id="civ">
  <style>
  </style>
  <slot id="slot1" name="child"></slot>
</div>

由于每个web组件(父组件和子组件)都是独立的,因此我一直在创建它们:

customElements.define('component-name', class extends HTMLElement {
  constructor() {
    super();
    this.shadowRoot = this.attachShadow({mode: 'open'});
    this.shadowRoot.innterHTML = `HTML markup`
  }
})

生成的DOM包括2个阴影根.我试图编写没有阴影dom的子/槽元素,这也不会导致托管孩子的父阴影dom.

那么,构建v1嵌套web组件的正确方法是什么？

我有一个Blob对象(用jsPDF生成)形式的PDF文件,我想在一个<iframe>元素中显示.

我可以这样轻松地做到这一点:

iframe.src = URL.createObjectURL( blob )

PDF格式正确,但我得到一个深奥的字符串代替其名称(请参阅Chrome的PDF查看器下面的图片).

所以我尝试将Blob转换为File对象,以便为它提供一个人类可读的名称.

var file = new File( [blob], 'a_name.pdf', { type: 'application/pdf' } )
iframe.src = URL.createObjectURL( file )

它适用于Firefox:从标题的PDF查看器保存文件时保留名称.不幸的是,它被放入Chrome中,并在加载到PDF查看器之前替换为随机文件名.

您知道是否可以在<iframe>文件名中显示PDF文件对象？

我有一个简单的Web组件,遵循最新的Web组件v1类语法,它在Chrome和Firefox/Edge(带有polyfill)中运行良好,但我希望它在IE11中运行,所以我需要转换类.然而,通过babel运行它会生成不再适用于任何浏览器的代码.

有没有办法用类语法生成向后兼容的Web组件,还是有一种首选方法来编写Web组件以实现最大兼容性？

示例代码 -

class TestElement extends HTMLElement {
  connectedCallback(){
    this.innerHTML = "<div>Testing</div>"
  }
}

customElements.define('test-element', TestElement)

使用转换代码时出现错误信息是 -

未捕获TypeError:无法构造'HTMLElement':请使用'new'运算符,此DOM对象构造函数不能作为函数调用.

已经有一段时间聚合物版本2可用了,但是

• 很少有人谈论它
• 很少有开发人员在他们的博客中写到这一点
• 很少有开发者分享他们的工作流程和经验

Polymer Project由Google提供支持,团队似乎拥有无可挑剔的理念.

除了缺乏浏览器支持,Polyfills仍然可以正常工作.

顺便说一句,虽然Web组件是Web的标准,但似乎人们不喜欢打开它并继续工作.

对我来说有一个很大的原因,应该有一个解释.

这是我认为与Stackoverflow有关然而我知道很多人不会喜欢这样的问题.

我想自动执行文件下载完成检查chromedriver. HTML下载列表中的每个条目看起来像

<a is="action-link" id="file-link" tabindex="0" role="link" href="http://fileSource" class="">DownloadedFile#1</a>

所以我使用以下代码来查找目标元素:

driver.get('chrome://downloads/')  # This page should be available for everyone who use Chrome browser
driver.find_elements_by_tag_name('a')

这将返回空列表,同时有3个新下载.

正如我发现的那样,只能#shadow-root (open)处理标签的父元素.那么如何在这个#shadow-root元素中找到元素呢？

假设我要创建一个自定义html元素,例如:

<video-container>
  <video></video>
</video-container>

所以我创建了这样一个模板:

<div class="wrapper">
   etc..
   <content></content>
</div>

然后我通过HTML元素原型将它附加到页面createdCallback.

内部的回调我希望能够给听众附加到video元素,所以我可以做的东西play,pause等等.如果有无论如何访问传入的视频标签目前尚不清楚给我.我可以接触到的content标签,但它不显示任何子节点.这可能吗？

我可以访问视频元素,如果我只是抓取整个文档并获取视频元素,但这很难看,因为我希望能够只获取当前自定义元素范围内的视频标记.