小编Mic*_*l K的帖子

我需要一个在影子根内的 css 中使用的选择器，它选择影子根的所有子级（但不是孙子级），无论它们是什么标签并且不给它们一个 ID。

在下面的示例中，SPAN、A、P 和 DIV 应该有一个红色边框，但 SPAN IN DIV 没有。

<my-element>
  #shadow-root
    <span>SPAN</span>
    <a>A</a>
    <p>P</p>
    <div>
      DIV
      <span>SPAN IN DIV</span>
    </div>
    <style>
      :root>*{border:1px red solid;}
    </style>
</my-element>

我希望:root-Selector 可以在 shadow dom 内完成这项工作，但事实并非如此。

如果有人展示如何在影子根上设置 ID，这也是一个可能的解决方案。

更新：

尝试使用#shadow-root > *作为选择器：

似乎不起作用。可能只是谷歌浏览器开发人员工具将阴影根元素可视化。

我尝试使用nodejs.org simple profiling guide 中的说明来分析我的（打字稿）应用程序，该应用程序在 node.js 中运行。但是，这些位置是由 node.js 运行的编译后的 js 源文件中的位置。

（如何）是否可以为该步骤启用源映射支持，以查看 ts 源文件中的位置？

node --prof-process isolate-0xnnnnnnnnnnnn-v8.log > processed.txt

截至 2017 年 8 月，我还没有找到解决方案......

我已经将save-prefix配置为默认添加'^'作为版本前缀。这对于我从npmjs安装的（无作用域和作用域）软件包非常有效。但是，对于来自我自己的注册表（verdaccio）的软件包，它不会附加前缀：

> npm install --save @my-scope/my-package
> cat package.json
...
"dependencies": {
  "@my-scope/my-package": "0.0.42",
}

从这个问题中我了解到，保存前缀是本地的，不受注册表或package.json的影响。

我是否必须在本地为注册表配置保存前缀？如果是这样：如何/在哪里？

关于为什么我自己的注册表中的软件包不使用'^'的其他想法？

我的.npmrc看起来像这样：

@oblamatik:registry=https://npm.dev.***********.ch
//npm.dev.oblamatik.ch/:_password="***************"
//npm.dev.oblamatik.ch/:username=ci
//npm.dev.oblamatik.ch/:email=ci@***********.ch
//npm.dev.oblamatik.ch/:always-auth=true

如果我理解正确，创建Web组件的一个实例可以概括为创造一个影子根，从模板复制标记，如到其中：

var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);

当然，如果模板中包含的风格标签的CSS规则，这些都将被复制为好。因此，我们可以有属于一个网络组件的内部标记范围的样式。

问题：

1. 是否有任何性能问题，当我创建万吨非常相同的Web组件的实例，作为样式只是复制，而不是重复使用？
2. 是否有要共享相同的Web组件的多个实例的风格节点的方法吗？

我真的很喜欢这种方式，打字稿在条件中处理变量类型：

class Foo {
  public bar(){...}
}
type Fun = ()=>void;
const X:Foo|Fun|PromiseLike<Foo|Fun> = whaeverReturnsFooOrFun();
...
//1: great!
if (X instanceof Foo) X.bar();
...
//2: great!
if (typeof(X) === 'function') X();

然而，鸭子打字并不是那么好......

//3: duck typing: not so great...
if ((<PromiseLike<Foo|Fun>>X).then) return X.then((X)=>{...});

相反，你必须写：

if ((<PromiseLike<Foo|Fun>>X).then) return (<PromiseLike<Foo|Fun>>X).then((X)=>{...});

如果您在块中多次使用 X ，这很烦人。我经常使用鸭子类型来找出对象是哪种（接口）类型。

有没有办法定义一个变量在块范围内具有更窄的类型？

例如：

if ((<PromiseLike<Foo|Fun>>X).then) {
  narrow X:PromiseLike<Foo|Fun>;
  return X.then((X)=>{...});
}

当然可以声明一个新变量，但我不喜欢那样，因为它是作用域中的一个新名称，而不是相同的名称：

if ((<PromiseLike<Foo|Fun>>X).then) {
  const X2 = <PromiseLike<Foo|Fun>>X;
  return X2.then((X)=>{...});
}