Javascript jQuery+；MarkItUp&x2B；聚合物-让它发挥作用？

使用，我试图创建一个可重用的组件，以便在需要时使用富文本编辑器

但是，尽管我可能会尝试，但我无法使其正确初始化。jQuery选择器根本找不到textarea元素来执行它的魔术。我已经尝试过无数次添加事件监听器、响应特定事件的咒语，很可能是由于我缺乏Javascript经验，我无法让所有这些都一起工作。以下是我到目前为止得到的（请注意，该文件位于名为“rich textarea”的元素下的文件夹中）：

我把这个问题看作是对聚合物的一个很好的试金石

ShadowDOM（Polymer使用）本质上是在CSS和DOM中添加了
作用域的概念。顾名思义，这意味着假定只有一个巨大的全局范围的技术无法与影子DOM一起开箱即用

例如，
document.querySelector
将不会在影子DOM中找到元素（同样，根据设计）。类似地，主文档中的CSS规则不会到达影子DOM内部的元素（除非这些规则是影子DOM感知的）

由于这个原因，众所周知，现在许多现有技术不仅仅适用于聚合物

定义DOM和CSS范围的功能非常强大，是一个巨大的飞跃，但需要进行一些调整才能充分发挥其优势。
$（“.makeItRich”）
将不起作用，因为textarea位于元素的ShadowRoot中，JQuery将无法找到它。此外，CSS的作用域是元素，因此必须将CSS链接放在模板中

当我尝试它时，它起了作用：

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/jquery2-import/jquery2-import.html">

<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/default/set.js"></script>

<polymer-element name="markitup-element" attributes="rows cols value">
<template>

  <style>
    :host {
      display: block;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css">
  <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css">

  <textarea id="rich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>

</template>
<script>

  Polymer({
    value: "",
    rows: 25,
    cols: 80,
    domReady: function() {
      $(this.$.rich).markItUp(mySettings);
    }
  });

</script>  
</polymer-element>


：主持人{
显示：块；
}
这可能不是一个答案，但需要一些学者的建议

jQuery.noConflict();
$ = function(selector,context){ 
    if (typeof selector === "string") {
        var that = document.querySelector("el-test").shadowRoot;
        return new jQuery.fn.init(that.querySelectorAll(selector));
        //return new jQuery.fn.init(selector, that);
    }else{
        return new jQuery.fn.init(selector,context);
    }
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery); 

上面是我用来扩展jquery构造函数（）的内容。在此之后，我能够在事件中正常使用jquery选择器。让我知道哪些是pifalls（如果有，我假设有）

小提琴在-

谢谢
你对你的回答的暗示是什么意思？没有办法结合各种现成的框架来创建我今天想要的RichTextArea组件吗？或者，您是在暗示ShadowDOM将要求重新写入所有内容吗？两者都不是。我不是说没有“不可能”，但这既不是现实，也不是你可以选择任何库的目标，它只会工作（在自定义元素内部；在外部则相反）。我也不是说“一切都必须重写”，而是说许多库都做出了需要调整兼容性的假设。最后，要认识到Web组件技术一开始就避免了导致这些框架存在的许多问题。我在这里制作了一个组件，以展示适当库共享的更多细节：谢谢。已在Chrome 35.0.1916.69 beta版上验证。为什么样式和脚本在
之外，这不意味着它们被添加到全局范围吗？因此，样式将不适用于阴影域。样式位于模板内。没有脚本的自动作用域。可以使用模块系统或全局。这里最简单的方法就是让
markitup
使用它的全局模式。
jQuery.noConflict();
$ = function(selector,context){ 
    if (typeof selector === "string") {
        var that = document.querySelector("el-test").shadowRoot;
        return new jQuery.fn.init(that.querySelectorAll(selector));
        //return new jQuery.fn.init(selector, that);
    }else{
        return new jQuery.fn.init(selector,context);
    }
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery);