我正在寻找布局我们的新网络组件的结构,我目前还不确定我是否找到了一个工具,它可以完成我们理想的所有工作,或者非常接近,但看起来它是公平的现在常想做的事情.
我们有一个运行Java服务器端的Web应用程序,而客户端我们大量使用JavaScript和SASS等.我们希望重新构建我们的一些代码库,并组合我们的动态页面内容的某些方面.
例如,我们希望有一个标准的表组件,可以完全独立于完整的Web应用程序开发.我看到表组件有以下3个核心文件:
然后帮助发展:
然后希望将所有这些文件编译成以下内容:
我看过的工具:
有没有人比上面的建议有更好的建议？什么东西更接近我们正在寻找的东西？理想情况下,不需要Node.js或Ruby的东西会更好......
我在Chrome Canary(33.0.1712.3)中探索导入,模板,影子DOM和自定义元素.在网格布局中,我有一个特定的内容元素(显示区域),它将显示从文件导入的不同Web组件或克隆的轻型DOM片段.但是,一旦添加了阴影DOM,我就无法重新显示普通的HTML DOM,因为我不知道如何删除阴影根.一旦创建,阴影根就会保留并干扰普通DOM的呈现.(我已经查看了各种W3C规范,例如Web组件介绍,影子DOM,模板,Bidelman关于HTML5 Rocks的文章等).我在下面的一个简单示例中找到了问题:
点击"show plain old div"; 点击"显示阴影模板"; 点击"show plain old div".每次点击后检查devtools.第三次点击后,按钮下面没有输出,在我看到的devtools中:
<div id="content">
#document-fragment
<div id="plaindiv">Plain old div</div>
</div>
我需要添加什么来removeShadow()来删除阴影根并完全将内容元素重置为其初始状态？
removing_shadows.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<template id="shadowedTemplateComponent">
<style>
div { background: lightgray; }
#t { color: red; }
</style>
<div id="t">template</div>
<script>console.log("Activated the shadowed template component.");</script>
</template>
<template id="plainDiv">
<div id="plaindiv">Plain old div</div>
</template>
</head>
<body>
<div>
<input type="button" value="show plain old div" onclick="showPlainOldDiv()"/>
<input type="button" value="show shadowed template" onclick="showShadowTemplate()"/>
<div id="content"></div>
</div> …您如何/可以避免每个Web组件发出服务器请求？
所以,有了javascript,很多人现在正在使用所谓的AMD模块加载模型,其中所有模块都是单独的javascript文件,并根据需要包含在内.例如.
- main.js
-- module1/mod1.js
-- module2/mod2.js
-- module3/mod3.js
这导致对服务器的多个请求,每个javascript文件一个.这被认为对应用程序性能有害,特别是在移动设备中,随着javascript模块数量的增加.
因此,诸如require.js之类的工具提供了一个编译器,它将自动跟踪依赖关系并生成包含其中所有模块的单个javascript文件; 有效地减少了单个文件的请求开销(通常是app-min.js).
每个Web组件都位于外部文件岛中,并使用标头中的链接标记导入:
<link rel="import" href="elements/image-gallery.html">
<link rel="import" href="elements/social-media.html">
<link rel="import" href="elements/pinmap.html">
<link rel="import" href="elements/nav-menu.html">
如果你正在使用聚合物,你可以使用硫化工具来组合聚合物组分(http://www.polymer-project.org/articles/concatenating-web-components.html),但这是因为(据我所知) polymer是一个javascript框架,可以从"polymer-element"标签动态加载Web组件.
使用不依赖于x-tag或聚合物等框架工作的"vanilla"Web组件是否有相同的方法？
我们在我们的网站上使用Web Components和Polymer,并且有很多Javascript等待"WebComponentsReady"事件在执行之前被触发.但是,我们有一些异步JS文件,偶尔会在事件触发后为事件添加一个事件监听器,这意味着我们要运行的脚本永远不会运行.
有没有人知道Web组件是否已准备好可以检查的标志？
我们需要这样的东西:
if(WebComponents.ready) { // Does this flag, or something similar, exist??
// do stuff
} else {
document.addEventListener('WebComponentsReady', function() {
// do stuff
}
}
任何帮助赞赏.
我想创建一个指令,决定是否应该或不应该在页面上的主机元素apppear.理想情况下,我希望它从DOM中删除元素,而不是用css隐藏/显示它.用例是:
<ul role="navigation">
<li><a>public link</a></li>
<li><a>public link2</a></li>
<li access="admin"><a>admin-only link</a></li>
</ul>
它将使用UserService来获取currentUser角色,如果没有管理员,那么li将被删除.
我想ng-if通过将表达式传递给主要组件中的evaulate,我可以实现相同的效果(如果它仍然在角度2中可用).但是使用该指令它更具语义和优雅.
可能吗？
import {Directive} from 'angular2/angular2';
@Directive({
selector: 'access'
})
export class Access {
//what goes here
}
我可以在角度1(内部指令的compile函数)中轻松完成,但我怎么能在Angular 2中做到这一点？
我正在寻找一种方法来包含异步angularJS应用程序,它自己的样式和视图包含在JS中的Polymer组件中.做某种事iframe.
如果您有任何想法,建议或现实世界的例子,那将非常有帮助!
在AngularJS 1.5中,我想将一个组件的绑定传递给(多槽)转换范围 - 用于模板中的引用(在一个特定的或全部的中 - 没有任何方法可以).
这用于创建通用自定义选择列表
// Component
.component('mySelect', {
bind: {
collection: '<'
},
transclude:{
header: 'mySelectHeader',
item: 'mySelectItem'
},
templateUrl: 'my-select-template',
controller: function(){
.....
}
});
...
// Component template
<script id="my-select-template" type="text/ng-template">
<ol>
<li ng-transclude="header"> </li>
<li ng-transclude="item"
ng-click="$ctrl.select($item)"
ng-repeat"$item in $ctrl.collection">
</li>
</ol>
</script>
...
// Example usage
<my-select collection="[{id: 1, name: "John"}, {id: 2, name: "Erik"}, ... ]>
<my-select-head></my-select-head>
<!-- Reference to $item from ng-repeate="" in component -->
<my-select-item>{{$item.id}}: {{$item.name}}</my-select-item>
</my-select>
这是可能的.component()吗？使用自定义指令 …
web-component angularjs transclusion angularjs-directive angularjs-scope
我正在尝试创建一个扩展 div 元素的 Web 组件，我发现了另一个关于如何扩展本机元素（在本例中为按钮）的Stack Overflow 问题。但是，我无法让它发挥作用。而且，根据此答案中的更新，它应该可以工作。
如果您查看此简化代码片段中的结果，它只是呈现为带有文本的简单内联元素。如果您打开 Chrome 控制台并查看属性选项卡，也很明显它不是从 HTMLButtonElement 继承的（它应该继承）。怎么了？
class FancyButton extends HTMLButtonElement {
constructor() {
super(); // always call super() first in the ctor.
this.addEventListener('click', e => this.innerHTML = "I was clicked");
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<fancy-button>Click me</fancy-button>
</body>
</html>我需要建立一个应该需要工作与两个规格，组件custom elements spec v0它得到了过时和custom elements spec v1，最新的稳定版本。
如果我使用custom elements v0规范构建组件，则某些应用程序将因为使用polymer 2和高于它们而面临问题，而与polymer 1无法使用custom elements v1规范的应用程序将面临同样的问题。
我无法控制更改Polyfill的应用程序，某些应用程序必须使用支持旧规范的Polyfill，而某些应用程序需要使用新的Polyfill。
我正在寻找一个可靠的解决方案，以结合这两个规范以在所有应用程序中运行我的自定义元素，而不管polyfills版本如何。我可以在组件中添加任何polyfill或snippet，以便它们可以在任何地方运行，但在我的研究中没有找到任何支持这两种规范的库或polyfill。
我打算编写一个适配器，该适配器可以结合下面提到的用于映射的回调的两个规范，对此思想的投入将不胜感激。
connectedCallback(){
this.attachedCallback();
}
我尝试使用stenciljs，但它只能与最新版本的自定义元素规范一起使用。我还没有找到任何方法来对其进行调整以使其与早期规范兼容。
请针对上述情况提出一些可行的替代方案和可行的解决方案。
我在Preact 中使用自定义元素又名 web 组件。问题是 Typescript 抱怨元素没有被定义在- 在这种情况下是一个元素：JSX.IntrinsicElementscheck-box
<div className={styles.option}>
<check-box checked={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/>
<p>Dark theme</p>
</div>
错误信息（省略路径）：
ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.
我遇到了以下可能的解决方案，但不幸的是无法正常工作：
我尝试将以下内容添加到我的typings.d.ts文件中：
ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.
我的 IDE 使导入部分变灰，IntrinsicElements这意味着它没有被使用 (?!) 并且无论如何它都不起作用。我仍然收到相同的错误消息。
web-component ×10
javascript ×4
angularjs ×2
html ×2
polymer ×2
angular ×1
maven ×1
polyfills ×1
preact ×1
requirejs ×1
shadow-dom ×1
transclusion ×1
typescript ×1