标签: shadow-dom
Polymer-AngularJS双向数据绑定
我有一些用Polymer创建的自定义元素.我们称之为x-input,它看起来像这样:
<polymer-element name="x-input" attributes="name">
<template>
<input type="text" value={{name}}> <span>{{name}}</span>
<br />
<input type="range" value={{age}} > <span>{{age}}</span>
</template>
</polymer-element>
我有这个HTML我使用Angular:
<html ng-app="testApp">
<body ng-controller="AppCtrl">
<input id="outer_input" type="text" ng-model="kids[0].name" value={{kids[0].name}} /> <br />
<span>name: {{kids[0].name}} age: {{kids[0].age}}</span><br />
<x-input ng-repeat="kid in kids" name={{kid.name}} age={{kid.age}}>
</x-input>
</body>
</html>
这是JS:
var testApp = angular.module('testApp', []);
testApp.controller('AppCtrl', function ($scope, $http)
{
$scope.kids = [{"name": "Din", "age": 11}, {"name": "Dina", "age": 17}];
}
问题在于双向数据绑定.当我更改#outer_input输入值时,x输入内部值(名称和年龄)会发生变化.
但是当我更改自定义元素输入时,只更改了内部绑定变量.
如何在聚合物元素中更改绑定变量的值,它将更改模型和所有外部绑定的UI和数据(双向绑定)？
谢谢
推荐指数
解决办法
查看次数
如何让网络组件的宽度和高度由其子项继承？
我有这个按钮,这是一个Web组件bootstrap-social.我想设置它,display:inline以便当内部文本结束时按钮结束.正如您在图像中看到的那样,它的高度和宽度都是0,我希望自定义元素的尺寸与它的孩子的尺寸相同.这怎么可能？
<bootstrap-social style="display: inline;"> 没有效果.
推荐指数
解决办法
查看次数
在<svg>中<use>未在IE中找到最接近的<div>
我有一个像这样的结构:
<div class="linkedItem" data-yt="youtubelink">
<svg><use></svg>
<div>youtube link</div>
</div>
在jQuery中,我在包装器上分配了一个click事件<div>:
$("div.linkedItem").on("click",launchYouTube);
function launchYouTube(e){
var _src = $(e.target).closest(".linkedItem").data("yt"));
};
在事件处理程序中,我_src在Chrome中获得了一个值,但在IE11中它是未定义的.似乎<use>在IE11中不知道它的父亲是什么,因此无法找到最接近的div.linkedItem.
我看到一篇关于svg陷阱的文章,我能想到的最接近的是#4(jQuery抛出错误),但我不认为这是出于某种原因.任何见解都表示赞赏.
推荐指数
解决办法
查看次数
是否可以将事件侦听器绑定到外部脚本的阴影dom中的元素？
我有一个chrome扩展,它将一个阴影dom元素注入页面以保持css分离.但是我需要将onclick绑定到内容脚本中的阴影dom中的一些元素,因为我需要能够通过单击阴影dom中的元素来调用内容脚本中的函数.
我已经尝试在模板元素中的元素和实际的阴影dom元素上使用.bind('click',function(){}),但我似乎无法访问它们.这可能吗？
推荐指数
解决办法
查看次数
Element.createShadowRoot()的替代方法是什么？
我正在使用这段代码:
function setShadowDOM(i, css){
[].forEach.call(document.getElementsByTagName(i), function(hostVal) {
var _root = hostVal.createShadowRoot();
_root.innerHTML = '<style>:host ' + css + '</style><content></content>';
})
}
我也读这个.
怎么解决这个？会有什么选择？
推荐指数
解决办法
查看次数
样式纸标签内容
我有关于的内容paper-tab.有没有办法设计它们以便在每个标签中获得两行内容？回到过去,我会创建两个div, then used:: shadow .tab-content to apply aflex-direction:column``但现在::shadow已弃用...我已尝试将其替换为chromestatus平台上建议的完整选择器:
paper-tabs.tabs paper-tab #shadow-root div.tab-content
{
flex-direction: column;
}
但它也不起作用.
我尝试过使用mixin style is="custom-style"
.tabs{
--paper-tab-content: {flex-direction: column;};
}
也不起作用
有任何想法吗？
推荐指数
解决办法
查看次数
在ContentEditable中使用Shadow DOM创建受保护的文本块
最近，我一直在使用ContentEditable开发一个简单的编辑器。该应用程序的要求很简单，唯一的例外是能够插入受常规编辑操作保护的文本块。
这些文本块无法编辑，并且必须表现为单个字符，才能在其中移动光标或将其删除。
生成的HTML的示例如下所示：
<div id="editor" contenteditable style="height: 400px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto;">
"This is standard text with a "
<span class="attrib">
#shadow-root
"PROTECTED"
"_"
</span>
" block"
</div>
尽管这提供了我需要的受保护文本部分，但它有两个主要问题我无法解决：
- 不会显示阴影DOM元素之后的文本。
- 光标根本不会在shadowDOM元素中移动。
有没有更好的方法可以做到这一点，还是无法以这种方式使用影子DOM？
推荐指数
解决办法
查看次数
Web组件Polyfill无法正常工作
我正在尝试按照https://www.webcomponents.org/polyfills/中的解释来填充web组件,因为我希望我的示例应用程序可以在Chrome和Firefox上运行.但是我得到了ReferenceError:Firefox中没有定义customElements错误.请参阅下面的index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="css/site.css">
<!-- Components -->
<link rel="import" href="components/global/site-navigation.html">
</head>
<body>
<script>
(function () {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
var e = document.createElement('script');
e.src = 'js/webcomponents.js';
document.body.appendChild(e);
}
})();
</script>
<site-navigation></site-navigation>
</body>
</html>
我错过了什么？
PS:Chrome中一切正常(有/无填充)
推荐指数
解决办法
查看次数
附加到Web组件内的阴影后，使用JS创建的模板标签不会出现
我希望以下代码创建一个元素，其中包含一个div带有文本“ Hi” 的元素。
该元素出现在检查器中，但屏幕上看不到任何文本。
当我将模板从a更改template为a时，div将显示文本。我在这里做错了什么？
class MyComponent extends HTMLElement {
constructor() {
super()
const shadowRoot = this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
const div = document.createElement('div')
div.innerHTML = 'Hi'
template.appendChild(div)
shadowRoot.appendChild(template.content)
}
}
customElements.define('my-component', MyComponent)
推荐指数
解决办法
查看次数
在Web组件中获取事件目标
<a>当用户与Web组件进行交互时，将创建锚元素（）。问题是，单击锚点后，无法从Web组件的“外部”返回锚点元素。
我添加了一个事件监听器来document监听点击事件。当单击DOM中某处的元素时，我希望成为e.target被单击的元素。在Web组件内部某处单击的情况下，<fancy-list></fancy-list>将返回自定义元素（）-而不是单击的元素。
当影子DOM的模式设置为openDOM时，应该可以访问。
class Fancylist extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const wrapper = document.createElement('div');
wrapper.innerHTML = `<ul></ul><button>Add item</button>`;
shadow.appendChild(wrapper);
this.on_root_click = this.on_root_click.bind(this);
}
connectedCallback() {
this.ul_elm = this.shadowRoot.querySelector('ul');
this.shadowRoot.addEventListener('click', this.on_root_click, false);
}
on_root_click(e){
switch(e.target.nodeName){
case 'BUTTON':
this.ul_elm.innerHTML += '<li><a href="p1">List item</a></li>';
break;
case 'A':
e.preventDefault();
console.log('You clicked a link!');
break;
}
}
}
customElements.define('fancy-list', Fancylist);
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<meta charset="utf-8" /> …
Run Code Online (Sandbox Code Playgroud)
Run Code Online (Sandbox Code Playgroud)推荐指数
解决办法
查看次数
标签 统计
shadow-dom ×10
javascript ×7
polymer ×3
css ×2
dom ×2
html ×2
angularjs ×1
element ×1
events ×1
html-imports ×1
jquery ×1
polyfills ×1
svg ×1