有没有推荐的方法让Icon Fonts(eq.FontAwesome/Octicons)流入Shadow DOM？
目前,当我想在自定义元素的Shadow DOM中使用图标时,我必须在Shadow DOM中包含ociticons.css内联文件的部分内容:
#shadowroot
<style>
.octicon, .mega-octicon {
font: normal normal normal 16px/1 octicons;
display: inline-block;
text-decoration: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mega-octicon { font-size: 32px; }
.octicon-search:before { content: '\f02e'} /* ? */
</style>
<button>
<span class="mega-octicon octicon-search"></span>
</button>
(显然,@font-face它会渗入Shadow DOM.)
例如,
假设我们有<div is="awesomebutton"></div>一个自定义元素定义:
document.registerElement('awesomebutton', AwesomeButton)
is=""删除属性或用新值替换属性时的预期行为是什么？
我正在探索Web组件自定义HTML元素,我遇到了向自定义元素添加自定义属性的问题:我在标记中设置的任何值都不会受到尊重.对于像这样的简单元素,它应该显示"flagtext"属性中提供的文本,它总是显示默认值.
<test-flag flagtext="my text"></test-flag>
完整的JSBin示例在这里.
JSBin使用Polymer库(因为这是我唯一可以使用的).我一般使用webcomponents.js,结果相同.Chrome 49和Firefox 45都有相同的结果.控制台或调试器中没有显示错误.
我在网上找到的每个样本都有类似的代码,但我尝试了各种版本,它总是拒绝更新.我甚至将一些样本复制到JSBin中,但它们也没有用.
可能有什么不对？我知道这是实验性技术,但这种不一致的一致性仍然令人惊讶.这个标准被废弃了吗？(我看到最新的2016年4月W3C自定义元素草案已完全改变了它的方法.)
当我定义"attributeChangedCallback"函数时,它不会触发.我可以通过Javascript轻松修改属性,这不是问题.
但是为什么我不能在标记中指定属性,就像我应该的那样？
编辑 - 完整代码
请注意,您需要将这些文件放入单独的HTML导入文件中,并且需要"webcomponents-lite.js"库.
主HTML文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
test-flag
{
border: 1px solid blue;
}
</style>
</head>
<body>
<script src="lib/webcomponents-lite.min.js"></script>
<link rel="import" href="test-flag.html">
Here is the custom test-flag component:
<p>
<test-flag flagtext="my text"></test-flag>
</body>
</html>
文件:test-flag.html
<template>
<style>
</style>
Content:
<div id="testflagID">
</div>
</template>
<script>
(function() {
var _currentScript = (document._currentScript || document.currentScript);
var importDoc = _currentScript.ownerDocument;
var customPrototype = Object.create(HTMLElement.prototype); …AngularJS 2能够使用Shadow DOM本机,当encapsulation: ViewEncapsulation.Native我按照我的理解设置时,它是Web组件的一部分......
但这给出了一些问题:
encapsulation: ViewEncapsulation.Native它会回退到ViewEncapsulation.Emulated浏览器不支持Shadow DOM的时候？encapsulation: ViewEncapsulation.Native？从文档中可以看出,该<content>元素支持一个select通过简单选择器过滤节点的属性.
那么针对某个内容元素的light dom元素是否应该包含一个css类标签/标签/值,允许浏览器将其映射到在select属性中设置了css标签/标签/值的相应内容元素？是否包含light dom元素,没有这样的标签映射到<content>没有select属性的元素？枚举可能性的一个例子将非常有用.
给定阴影根中包含的元素,如何获取承载所述阴影根的元素？有没有一种方法可以实现这一点,无论元素在树中的位置(即给定引用element2或者element3,获取引用element1)？
element1
? #shadow-root
? element2
? element3
我正在使用Polymer 1.8(入门套件模板).我想知道如何创建一个搜索过滤器自定义元素,如https://codelabs.developers.google.com/中的那个
正如您所看到的,它会过滤掉它下面的卡片,每次击键都会在搜索栏中输入,只留下包含所需搜索词的卡片.
我希望它能找到两者中的单词:
<paper-card>(文中heading)divs(描述a <paper-card>)搜索框,我发现的唯一例子是此页从2015年的聚合物元件目录的这一页,它使用类似的搜索框,但我不能使其适应我的自定义元素.
my-preview-cards自定义元素:它包含卡片本身:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-preview-cards">
<template>
<style>
/* local DOM styles go here */
:host {
display: inline-block;
}
</style>
<div>
<paper-card heading="Color picture" image="http://lorempixel.com/300/200">
<div class="card-content">An RGB picture</div>
<div class="card-actions">
<paper-button>Button</paper-button>
</div>
</paper-card>
<paper-card heading="Grey image" image="http://lorempixel.com/g/300/200">
<div class="card-content">That's a grey picture</div>
<div class="card-actions">
<paper-button>Button</paper-button>
</div>
</paper-card>
</div>
</template>
<script> …我们必须使用只能扩展的CMS web components,但由于我们有复杂的模块,我们希望编写模块Angular 4(另外,由于其他原因,我们被迫使用Angular而不是,比方说React).
是否可以编写一个Angular 4应用程序并将其包装成web component？
我正在尝试在CSS动画完成后在Web组件上触发事件，但是用户可能会使用事件从不会触发的animation: none;含义从元素中清除动画transitionend：
// wait for dialog close animation to end before firing closed event
element.addEventListener('transitionend', function() {
// fire dialog closed event
self.dispatchEvent(new CustomEvent('pure-dialog-closed', {
bubbles: true,
cancelable: true
}));
});
为了确保自定义事件始终触发，我需要确定元素或其任何子级是否应用了动画，如果没有，请pure-dialog-closed立即触发该事件。
我已尝试检查style.animationName，self.style.transition但似乎无法正常工作。我需要一种简单的方法来检查某个元素或其任何子元素是否应用了CSS动画。
javascript css3 web-component css-transitions css-animations
在MDN文档中，我看到了WebComponents可以实现的名为的函数adoptedCallback。MDN文档说明：
“将自定义元素移到新文档时调用。”
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements
https://github.com/w3c/webcomponents/issues/512
自定义元素已移至新文档是什么意思？我应该在什么情况下实施？
web-component ×10
javascript ×7
html ×4
shadow-dom ×4
polymer ×3
angular ×2
polymer-1.0 ×2
angularjs ×1
css3 ×1
font-face ×1
icon-fonts ×1
octicons ×1